Question

我正在尝试动态添加和填充一些选择框：

$("#mydiv").append("<table id='myTab'><tr></tr></table>")
var row = "";

for (var i = 0; i < 3; i++) {
    row += "<select id='sel" + i + "'>";

    for (var j = 0; j < 3; j++) {
        row += "<option id='opt" + j + "'>Test " + j + "</option>";
    }

    row += "</select>";

    $("#mydiv").on('change', '#sel' + i, function() {
        alert($(this).val());
    });
}

$("#mytab").append(row);

不幸的是，不会显示选择框但是，当我输出row时，我得到预期的输出：

<select id='sel0'>
    <option id='opt0'>Test 0</option>
    <option id='opt1'>Test 1</option>
    <option id='opt2'>Test 2</option>
    </select>
<select id='sel1'>
    <option id='opt0'>Test 0</option>
    <option id='opt1'>Test 1</option>
    <option id='opt2'>Test 2</option>
</select>
<select id='sel2'>
    <option id='opt0'>Test 0</option>
    <option id='opt1'>Test 1</option>
    <option id='opt2'>Test 2</option>
</select>

Here is a fiddle

Answer 1

只需替换......

$("#mytab").append(row);

...与......

$("#myTab").append(row);

演示

＆＃13;

$("#mydiv").append("<table id='myTab'><tr></tr></table>")
var row = "";

for (var i = 0; i < 3; i++) {
    row += "<select id='sel" + i + "'>";

    for (var j = 0; j < 3; j++) {
        row += "<option id='opt" + j + "'>Test " + j + "</option>";
    }

    row += "</select>";

    $("#mydiv").on('change', '#sel' + i, function() {
        alert($(this).val());
    });
}

$("#myTab").append(row);

＆＃13;

table {
    border: 1px solid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="mydiv">

</div>

＆＃13;

（另见this Fiddle）

Answer 2

将选择框添加到<td>而不是<table>

中

Answer 3

你的代码很好。只是选择是拼错。

$("#myTab").append(row);

Answer 4

您可以使用Select2，因为您需要更新数据。

动态添加和填充选择框

4 个答案:

演示