如何根据第一个下拉选择获取动态生成的两个下拉列表的第二个下拉列表的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

如果我理解正确，你想在第一次下拉时获得第二次下拉。

使用“近似”将获得具有条件id = FieldContainer的最近父级，之后您可以只搜索该div用于子级选择。

我使用$（“body”）。on（...）以便dinamycally添加的元素将处理更改事件

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

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