如何根据第一个下拉选择获取动态生成的两个下拉列表的第二个下拉列表的 ID？

Question

我在每一行上动态生成 2 个下拉控件，因此在每一行上我将有 2 个下拉控件。

现在考虑在第 1 行我选择第 1 个下拉菜单，然后在第 1 个下拉菜单的更改事件中我想填充第 2 个下拉菜单，因此我需要找到第 1 行第 2 个下拉控件的 id。

对于每一行，我想根据第一个下拉控件选择获得第二个下拉控件 ID。

那该怎么做呢？

var cnt = 1;

var obj = {
  Cars: [{
    "CarType": "BMW",
    "carID": "bmw123"
  }, {
    "CarType": "mercedes",
    "carID": "merc123"
  }, {
    "CarType": "volvo",
    "carID": "vol123r"
  }, {
    "CarType": "ford",
    "carID": "ford123"
  }]
};


function AddRow() {

  var fieldWrapper1 = $("<div class='col-md-3 col-xs-12 col-sm-12 form-group' cnt ='field" + cnt + "'/>");
  var fieldWrapper2 = $("<div  class='col-md-4 col-xs-12 col-sm-12 form-group' cnt ='field" + cnt + "'/>");

  var fName1 = $("<select class='coursefieldname' cnt ='drpdownCourse" + cnt + "'  name='drpdownCourseNm" + cnt + "'  />");
  var fName2 = $("<select class='fieldname' cnt ='SubCourse" + cnt + "'  name='SubCourseNm" + cnt + "'  />");

  fieldWrapper1.append(fName1);
  fieldWrapper2.append(fName2);
  var newRow = $("<div class='row' cnt ='row" + cnt + "'/>");
  $(newRow).append(fieldWrapper1);
  $(newRow).append(fieldWrapper2);
  $(newRow).insertBefore($(".add-more").parent());
  $(newRow).append("<br>");
  var courseDropdown = $('#drpdownCourse' + cnt);
  courseDropdown.empty();


  for (var i = 0; i < obj.Cars.length; i++) {
    var option = $('<option></option>').text(obj.Cars[i]['CarType']);
    $('#drpdownCourse' + cnt).empty().append(option);
  }
  cnt = cnt + 1;
}



$(document).on('change', "select.coursefieldname", function() {
  var yourSecondSelectInTheRow = $(this).closest("#field1");
  console.log(yourSecondSelectInTheRow)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<p><span class="add-more">&nbsp;<a onclick="AddRow()" href="#">+ Add</a></span>
</p>

Answer 1

由于select 元素是动态生成的，因此您需要使用事件委托在其上绑定事件。

$(document).on('change', 'select', function () {
    var nextSelectName = $(this).parent().next().children('select').attr('name');
});

1. $(this) 是已更改的元素。 select元素
2. .parent() 将选择元素的直接父级
3. next() 将直接选择下一个兄弟元素
4. children('select') 将选择直接子元素<select>
5. attr('name') 给出了name 属性的值

Answer 2

如果我理解正确，您希望在第一个更改时获得第二个下拉列表。

使用最接近的将为您提供条件 id=FieldContainer 的最接近的父级，然后您可以在该 div 中搜索您的子课程选择。

我使用了 $("body").on(...) 以便动态添加的元素将处理更改事件

 $("body").on("change", "select#drpdownCourse", function(){
     var yourSecondSelectInTheRow = $(this).closest("#FieldContainer").find("select#drpdownSubCourse");
 });