jquery - 动态添加的下拉列表未发布

Question

假设我的页面有以下 HTML:

<form action="/some/where" method="POST">
     <div id="someDiv">
     </div>
</form>

然后假设我单击一个按钮，该按钮调用一个函数，该函数使用 jQuery 以某种方式向该 DIV 添加一个下拉列表。

(我正在使用 DataTables，DIV 实际上是一个 TD)

    var ddlSubset = '<select id="ddlSubset_' + rowNum + '"></select>';
    oTable.fnUpdate(ddlSubset, rowNum, 3, false, true);

    var subsetsURL = "/TotalTuple/Subsets";

    $.getJSON(subsetsURL, function (data) {
        for (i = 0; i < data.length; i++) {
            if (data[i] == subsetData) {
                $('#ddlSubset_'+rowNum).append($('<option selected></option>').text(data[i]));
            }
            else {
                $('#ddlSubset_' + rowNum).append($('<option></option>').text(data[i]));
            }
        }

    });

如果我在创建控件之前和之后查看页面源代码，它们是相同的。

当我提交表单时，新的 DDL 没有传递。

如何确保 DDL 包含在表单中？

Answer 1

试试这个:- http://jsfiddle.net/adiioo7/2Ra2S/1/

只需提供name属性给动态添加的select。

JS:-

jQuery(function($){
    $("#btnAddDropdown").on("click",function(){
        $("#someDiv").html("<select name='test'><option>Test</option></select>");                           
    });

     $("#btnSubmit").on("click",function(){
         $("#myForm").submit();
     });

    $("#myForm").on("submit",function(){
        var datastring = $("#myForm").serialize();
        console.log(datastring);
    });
});

HTML:-

<form id="myForm" action="/some/where" method="POST">
     <div id="someDiv">
     </div>
</form>

<input type="button" value="Add Dropdown" id="btnAddDropdown" />
<input type="button" value="Submit Form" id="btnSubmit" />