-1

我在每一行上动态生成 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>

4

2 回答 2

2

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

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

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

 $("body").on("change", "select#drpdownCourse", function(){
     var yourSecondSelectInTheRow = $(this).closest("#FieldContainer").find("select#drpdownSubCourse");
 });
于 2015-10-12T11:47:48.323 回答
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属性的值
于 2015-10-13T06:53:01.687 回答