Question

我正在使用jQuery动态创建两个下拉列表，其中第一个下拉列表确定将在第二个中放置的内容如下：

$("#add").click(function () {
var id = Date.now();
var text = " <div class='row' id='" + id + "'><br /> \
<div class='col-md-3'><select class='listOptions' id='myoptions[" + id + "].user'>" + listOptions + "</select></div> \
<div class='col-md-3'><select class='secondOptions' id='myoptions[" + id + "].cars'></select></div></div>";

这将以这种格式创建两个下拉列表：

myoptions[1405087264136].user
myoptions[1405087264136].cars

通过

轻松访问第一个下拉列表

$(document).on("change", '.listOptions', function () {...}

现在问题是访问第二个让我困惑的问题：

我试过这个：

currentid = $(this).attr('id').substr(0, 24) + ".cars";

但是这两行中的任何一行都返回0

alert($("#" + currentid).length);
alert(document.getElementById(currentid).length);

注意：由于某种原因，在控制台中，我可以访问第二个选项

我错过了什么？

Answer 1

您可以结合使用closest（获取父级）和find来获取相关的.secondOptions元素。试试这个：

$(document).on("change", '.listOptions', function () {
    var currentid = $(this).closest('.row').find('.secondOptions').val();
});

以这种方式使用DOM遍历意味着您不必担心唯一或增量标识符。

Dom没有找到动态创建的选择框

1 个答案: