javascript - 动态添加和填充选择框

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);

---

演示

$("#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);

table {
    border: 1px solid;
}

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

</div>

(另见 this Fiddle)