在动态添加的选择框上禁用相同的选择选项

Question

我有多个动态添加的选择框。选项也是动态附加的。现在我想要的是，如果现在当用户添加另一个选择框时选择了一个值为“Lead”的选择框，那么需要禁用“Lead”的值，因为不应该有两个“Lead”。请向我建议如何实现这一目标。

<div class="form-group">
    <label>Partner Organisation (If there are partners)</label>
    <table class="table table-bordered" id="dynamic_field">
        <tr>
            <td>
                <label for="tags">Organisation </label>
                <select class="form-control" name="stg_partner_id[]">
                    <option value="">Select</option>
                    @foreach($partnerorganisations as $pg)
                        <option value="{{ $pg->id }}">{{ $pg->partner_organisation }}</option>
                    @endforeach
                </select>
            </td>
            <td>
                <label for="tags">Role </label>
                <select class="form-control" name="role[]">
                    <option value="">Select</option>
                    @foreach($roles as $role)
                        <option value="{{ $role }}">{{ $role }}</option>
                    @endforeach
            </select>
            </td> 
            <td>
                <button type="button" name="add" id="add" class="btn btn-success">+ </button>
            </td> 
        </tr>
    </table>
</div>

现在，我的 jquery 看起来像这样。

var data = [<?php echo '"'.implode('","', $roles).'"' ?>];
var partnerdata = @json($partnerorganisations);
// console.log(app);
$(document).ready(function(){  
    var i=0;  
    $('#add').click(function(){  
        i++;  
        $('#dynamic_field').append('<tr id="row'+i+'"><td><select class="form-control" name="stg_partner_id[]" id="partnerOption'+i+'"><option value="">Select</option></select></td><td><select class="form-control" name="role[]" id="newOption'+i+'"><option value="">Select</option></select></td> <td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></th></tr>'); 
        // console.log(data);
        $.each(data, function(key, value) {
            $('#newOption'+i+'')
                .append($("<option></option>")
                .attr("value", value)
                .text(value)); 
        });

        $.each(partnerdata, function(key, value) {
            $("select option:contains('value " + value.id + "')").prop("disabled","disabled"); 
            $('#partnerOption'+i+'')
                .append($("<option></option>")
                .attr("value", value.id)
                .text(value.partner_organisation));  
        });
    });  
    $(document).on('click', '.btn_remove', function(){  
        var button_id = $(this).attr("id");   
        $('#row'+button_id+'').remove();  
    });  
});

Answer 1

由于会有多个选择框，您可以使用.each 循环遍历所有选择框，然后使用该值从其他选择框添加禁用的选项。

演示代码：

$(document).ready(function() {
  var i = 0;
  $('#add').click(function() {
    i++;
    $('#dynamic_field').append('<tr id="row' + i + '"><td><select class="form-control" name="stg_partner_id[]" id="partnerOption' + i + '"><option value="">Select</option><option value="1">A</option><option value="2">B</option><option value="3">C</option></select></td><td><select class="form-control" name="role[]" id="newOption' + i + '"><option value="">Select</option><option value="1">A1</option> <option value="2">B2</option><option value="3">C2</option></select></td> <td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></th></tr>');
    //your other codes
    check_now(); //call to disable
  });
  $(document).on('click', '.btn_remove', function() {
    var button_id = $(this).attr("id");
    $('#row' + button_id + '').remove();
  });

  $(document).on('change', 'select[name*=stg_partner_id]', function() {
    check_now() //on change call as well
  })

  function check_now() {
    //remove disable from all options
    $("select[name*=stg_partner_id] option").prop('disabled', false)
    //loop through select box
    $("select[name*=stg_partner_id]").each(function() {
      var values = $(this).val()
      if (values != "") {
        //find option where value matches disable them
        $("select[name*=stg_partner_id]").not(this).find("option[value=" + values + "]").prop('disabled', true);
      }
    })
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="form-group">
  <label>Partner Organisation (If there are partners)</label>
  <table class="table table-bordered" id="dynamic_field">
    <tr>
      <td>
        <label for="tags">Organisation </label>
        <select class="form-control" name="stg_partner_id[]">
          <option value="">Select</option>

          <option value="1">A</option>

          <option value="2">B</option>

          <option value="3">C</option>

        </select>
      </td>
      <td>
        <label for="tags">Role </label>
        <select class="form-control" name="role[]">
          <option value="">Select</option>
          <option value="1">A1</option>

          <option value="2">B2</option>

          <option value="3">C2</option>

        </select>
      </td>
      <td><button type="button" name="add" id="add" class="btn btn-success">+ 
                      </button></td>
    </tr>
  </table>
</div>