-1

各行に2つのドロップダウンコントロールを動的に生成しているため、各行に2つのドロップダウンコントロールがあります。

ここで、1 行目で 1 番目のドロップダウンを選択し、1 番目のドロップダウンの変更イベントで 2 番目のドロップダウンを埋めたいので、その 1 行目の 2 番目のドロップダウン コントロールの ID を見つける必要があると考えます。

行ごとに、最初のドロップダウン コントロールの選択に基づいて 2 番目のドロップダウン コントロール 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

私が正しく理解していれば、最初のドロップダウンが変更されたときに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 に答える