向表单添加字段(jQuery)

2022-01-22 00:00:00 append forms jquery javascript

I'm constructing a form. No problem there. Aside of a submit button, I have another button that, when clicked, adds another field to the form. I am attempting to use javascript (jquery) to do this. Needless to say I am not having any luck. I have tried many different methods, and this is the one I gave up at:

$("#snew").click(function () {  
var container = $("#sblc").add("div");
var content = "<select> <option>Domestic</option><option>Tiger</option><option>Peeled                  Raw</option><option>Cooked Peeled Tail On<option></select><select> <option>1 lbs</option>   <option>2 lbs</option><option>3 lbs</option></select>";

                $(container).attr("class", "opt");
                $(container).append(content); 
                $(container).appendTo("#sblc"); 

            })

Here is the HTML that corresponds: http://pastie.org/3729304 (I couldn't figure out how to get the HTML to display properly on here. Sorry for the link. )

Whenever I try this, I end up either getting a completely white page, or nothing happens at all. Any help would be greatly appreciated.

解决方案

Try something like below,

DEMO

$("#snew").click(function() {
    var container = $("<div />");
    var content = "<select> <option>Domestic</option><option>Tiger</option><option>Peeled                  Raw</option><option>Cooked Peeled Tail On<option></select><select> <option>1 lbs</option>   <option>2 lbs</option><option>3 lbs</option></select>";

    $(container)
        .attr("class", "opt") //add class to the div container
        .append(content)      //append select to the div
        .appendTo("#sblc");   //append div to #sblc

});

相关文章