检测动态添加的选择选项是否在选择选项的同一行中

Question

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

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

这是我的代码

刀

<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>

JS

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

请赐教。

Answer 1

您正在使用.subcategory作为选择器，并且确实会影响所有select具有类subcategory您可以尝试

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