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

Question

我在每一行上动态生成 2 个下拉控件，因此在每一行上我将有 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

如果我没理解错的话，您希望在第一个下拉列表发生变化时获得第二个下拉列表。

使用 closest 将为您提供最接近的具有条件 id=FieldContainer 的父项，之后您可以搜索 div 以查找您的子课程 select.

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

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

Answer 2

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

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

$(this) 是被改变的元素。 select 元素
.parent() 将 select 元素的直接父级
next() 将 select 直接下一个兄弟元素
children('select') 将 select 直接子 <select> 元素
attr('name')给出name属性的值

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

How to get id of second dropdown of dynamically generated two dropdown based on first dropdown selection?

html

javascript

jquery

dropdown