Javascript 检测动态添加的选择选项是否位于该选择选项的同一行中

我有三个选择。如果用户可以单击“添加更多人才”，则会生成动态选择选项，该选项也会生成动态选项

如果我在新添加的选择选项上单击第一个选择选项。第二个选择选项也会更改。

这是我的密码

刀片

{！！Form:：select（'category[]'，['select category'=>0]，null，['class'=>'浏览器默认值'，'id'=>'类别']）
{！！Form:：select（'subcategory[]'，['select subcategory'=>'select subcategory']，null，['class'=>'浏览器默认值'，'id'=>'subcategory']）
{！！Form:：select（'talent[]'，['select talent']，null，['class'=>'browser default'，'id'=>'talent']）

JS

$（文档）.ready（函数（$）{
var i=0；
$.ajax({
url:“{url（'/revalcategory/'）}}”，
方法：“获取”，
数据类型：“json”，
数据：{}，
成功：功能（数据）{
控制台日志（数据）；
var next_id=$（“#类别”）；
$（“#category”）.empty（）.html（“”）；
$。每个（数据、函数（键、值）{
$（next_id）.append（$（“”）.attr（“value”，value.value）.text（value.value））；
});
$（下一个id）。材质选择（）；
//$（“#人才”）.html（数据）；
}
});
$（“#类别”）。更改（函数（）{
var tal_cal=$（this.val（）；
$.ajax({
url:“{url（'/revealSubCategory/'）}}”，
方法：“获取”，
数据类型：“json”，
数据：{tal_-cal:tal_-cal}，
成功：功能（数据）{
var next_id=$（“#子类别”）；
$（“#子类别”）.empty（）.html（“”）；
$。每个（数据、函数（键、值）{
$（next_id）.append（$（“”）.attr（“value”，value）.text（value））；
});
$（下一个id）。材质选择（）；
}
});
$.ajax({
url:“{url（'/revealTalents/'）}}”，
方法：“获取”，
数据类型：“json”，
数据：{tal_-cal:tal_-cal}，
成功：功能（数据）{
var next_id=$（“#人才”）；
$（“#人才”）.empty（）.html（“”）；
$。每个（数据、函数（键、值）{
$（next_id）.append（$（“”）.attr（“value”，value）.text（value））；
});
$（下一个id）。材质选择（）；
}
});
});
$（“#子类别”）.change（函数（）{
var tal_cal=$（this.val（）；
$.ajax({
url:“{url（'/revealTalentsFromSub/'）}”，
方法：“获取”，
数据类型：“json”，
数据：{tal_-cal:tal_-cal}，
成功：功能（数据）{
var next_id=$（“#人才”）；
$（“#人才”）.empty（）.html（“”）；
$。每个（数据、函数（键、值）{
$（next_id）.append（$（“”）.attr（“value”，value）.text（value））；
});
$（下一个id）。材质选择（）；
}
});
});
$（“#talentcontainer”）.on（'change'，'category'，函数（事件）{
var tal_cal=$（this.val（）；
$.ajax({
url:“{url（'/revealSubCategory/'）}}”，
方法：“获取”，
数据类型：“json”，
数据：{tal_-cal:tal_-cal}，
成功：功能（数据）{
var target=$（event.target）；
控制台日志（目标）；
var next_id=$（'.subcategory'）；
console.log（下一个\u id）；
//var categoryID=$（event.target）.attr（'id'）；
//var tid=event.delegateTarget.children[3]。children[1]。children[0]。id；
//var talentID=$（“[class^=talent]”）。attr（'id'）；
//控制台日志（tid）；
$（“.subcategory”）.empty（）.html（“”）；
$。每个（数据、函数（键、值）{
$（next_id）.append（$（“”）.attr（“value”，value）.text（value））；
});
$（下一个id）。材质选择（）；
//$（“#人才”）.html（数据）；
}
});
});
$（“#talentcontainer”）.on（'change'，'subcategory'，函数（事件）{
var tal_cal=$（this.val（）；
$.ajax({
url:“{url（'/revealTalentsFromSub/'）}”，
方法：“获取”，
数据类型：“json”，
数据：{tal_-cal:tal_-cal}，
成功：功能（数据）{
var next_id=$（“.talent”）；
$（“.talent”）.empty（）.html（“”）；
$。每个（数据、函数（键、值）{
$（next_id）.append（$（“”）.attr（“value”，value）.text（value））；
});
$（下一个id）。材质选择（）；
}
});
});
$（'\talentcontainer'）。在（'单击'、'\AddTalking'，函数（）{
$.ajax({
url:“{url（'/revalcategory/'）}}”，
方法：“获取”，
数据类型：“json”，
数据：{}，
成功：功能（数据）{
//var current=$（this）.closest（'.category'）.index（）；
//console.log（当前）；
var next_id=$（“.category”）；
$（“.category”）.empty（）.html（“”）；
$。每个（数据、函数（键、值）{
$（next_id）.append（$（“”）.attr（“value”，value.value）.text（value.value））；
});
$（下一个id）。材质选择（）；
//$（“#人才”）.html（数据）；
}
});
});
$（“#添加人才”）。在（“单击”，功能(
<div class="row" id="talentcontainer">
                        <div class="col s3">
                          {!! Form::select('category[]', ['Select Category' => 0], null, ['class' => 'browser-default', 'id' => 'category']) !!}
                        </div>
                        <div class="col s3">
                          {!! Form::select('subcategory[]', ['Select Subcategory' => 'Select subcategory'], null, ['class' => 'browser-default', 'id' => 'subcategory']) !!}
                        </div>
                        <div class="col s3">
                          {!! Form::select('talent[]', ['Select talent'], null, ['class' => 'browser-default','id' => 'talent']) !!}
                        </div>
                        <div class="col s12">
                          <a href="javascript:void(0)" id="addtalent">Add more talent</a>
                        </div>
                       </div>

$(document).ready(function($) {
      var i = 0;
        $.ajax({
            url: "{{ URL('/revealCategory/') }}",
            method: "GET",
            dataType: "json",
            data: {},
            success: function(data){
                console.log(data);
                var next_id = $("#category");
                $("#category").empty().html(' ');
                $.each(data, function(key, value) {
                    $(next_id).append($("<option></option>").attr("value", value.value).text(value.value));
                });
                $(next_id).material_select();
                // $("#talent").html(data);
            }
          });
    $("#category").change(function() {
        var tal_cal = $(this).val();
        $.ajax({
            url: "{{ URL('/revealSubCategory/') }}",
            method: "GET",
            dataType: "json",
            data: {tal_cal:tal_cal},
            success: function(data){
                var next_id = $("#subcategory");
                $("#subcategory").empty().html(' ');
                $.each(data, function(key, value) {
                    $(next_id).append($("<option></option>").attr("value", value).text(value));
                });
                $(next_id).material_select();
            }
          });
        $.ajax({
            url: "{{ URL('/revealTalents/') }}",
            method: "GET",
            dataType: "json",
            data: {tal_cal:tal_cal},
            success: function(data){
                var next_id = $("#talent");
                $("#talent").empty().html(' ');
                $.each(data, function(key, value) {
                    $(next_id).append($("<option></option>").attr("value", value).text(value));
                });
                $(next_id).material_select();
            }
          });
      });
    $("#subcategory").change(function() {
        var tal_cal = $(this).val();
        $.ajax({
            url: "{{ URL('/revealTalentsFromSub/') }}",
            method: "GET",
            dataType: "json",
            data: {tal_cal:tal_cal},
            success: function(data){
                var next_id = $("#talent");
                $("#talent").empty().html(' ');
                $.each(data, function(key, value) {
                    $(next_id).append($("<option></option>").attr("value", value).text(value));
                });
                $(next_id).material_select();
            }
          });
      });

    $('#talentcontainer').on('change', '.category', function(event) {
        var tal_cal = $(this).val();
        $.ajax({
            url: "{{ URL('/revealSubCategory/') }}",
            method: "GET",
            dataType: "json",
            data: {tal_cal:tal_cal},
            success: function(data){
                var target = $(event.target);
                console.log(target);
                var next_id = $('.subcategory');
                console.log(next_id);
                // var categoryID = $(event.target).attr('id');
                // var tid = event.delegateTarget.children[3].children[1].children[0].id;
                // var talentID = $("[class^=talent]").attr('id');
                // console.log(tid);
                $(".subcategory").empty().html(' ');
                $.each(data, function(key, value) {
                    $(next_id).append($("<option></option>").attr("value", value).text(value));
                });
                $(next_id).material_select();
                // $("#talent").html(data);
            }
          });
      });

    $('#talentcontainer').on('change', '.subcategory', function(event) {
        var tal_cal = $(this).val();
        $.ajax({
            url: "{{ URL('/revealTalentsFromSub/') }}",
            method: "GET",
            dataType: "json",
            data: {tal_cal:tal_cal},
            success: function(data){
                var next_id = $(".talent");
                $(".talent").empty().html(' ');
                $.each(data, function(key, value) {
                    $(next_id).append($("<option></option>").attr("value", value).text(value));
                });
                $(next_id).material_select();
            }
          });
      });

      $('#talentcontainer').on('click', '#addtalent', function() {
        $.ajax({
            url: "{{ URL('/revealCategory/') }}",
            method: "GET",
            dataType: "json",
            data: {},
            success: function(data){
                // var current = $(this).closest('.category').index();
                // console.log(current);
                var next_id = $(".category");
                $(".category").empty().html(' ');
                $.each(data, function(key, value) {
                    $(next_id).append($("<option></option>").attr("value", value.value).text(value.value));
                });
                $(next_id).material_select();
                // $("#talent").html(data);
            }
          });
        });


    $("#addtalent").on("click", function (event) {
      $("#talentcontainer").append("<div class='row' id='temprow'><div class='col s3'><select class='category browser-default' name='category[]'></select></div><div class='col s3'><select class='subcategory browser-default' name='subcategory[]'></select></div><div class='col s3'><select class='talent browser-default' name='talent[]'><option value='Select Talent'>Select Talent</option></select></div><div class='col s2'><a href='javascript:void(0)' id='removetalent'>Remove</a></div></div>");
      i++;
    });

    $("#talentcontainer").on("click", '#removetalent',function (event) {
      $("#temprow").remove();
    });

    $(".wrap").on("click", '#removetalent',function (event) {
      var tal_cal = $(this).data("id");
      $.ajax({
            url: "{{ URL('/removeTalent/') }}",
            method: "GET",
            data: {tal_cal:tal_cal},
            success: function(data){
                console.log(data);
                $("#preload").remove();
            }
          });
      });
  });

$('#talentcontainer').on('change', '.category', function(event) {
        var tal_cal = $(this).val();
        $.ajax({
            url: "{{ URL('/revealSubCategory/') }}",
            method: "GET",
            dataType: "json",
            data: {tal_cal:tal_cal},
            success: function(data){
                var target = $(event.target);
                console.log(target);
                var next_id = $('.subcategory');
                console.log(next_id);
                // var categoryID = $(event.target).attr('id');
                // var tid = event.delegateTarget.children[3].children[1].children[0].id;
                // var talentID = $("[class^=talent]").attr('id');
                // console.log(tid);
                $(".subcategory").empty().html(' ');
                $.each(data, function(key, value) {
                    $(next_id).append($("<option></option>").attr("value", value).text(value));
                });
                $(next_id).material_select();
                // $("#talent").html(data);
            }
          });
      });

$('#talentcontainer').on('change', '.category', function(event) {
        var that = this;
        var tal_cal = $(this).val();
        $.ajax({
            url: "{{ URL('/revealSubCategory/') }}",
            method: "GET",
            dataType: "json",
            data: {tal_cal:tal_cal},
            success: function(data){
                var target = $(event.target);
                var next_id = $(that).parent('div').next('div').find('.subcategory'); //assuming you have all your row in #talentcontainer  
                console.log(next_id);

                next_id.empty().html(' ');
                $.each(data, function(key, value) {
                    next_id.append($("<option></option>").attr("value", value).text(value));
                });
                next_id.material_select();
                // $("#talent").html(data);
            }
          });
      });