HTML Dropdown 禁用 Javascript 中的选项

Question

问题：下面的代码是隐藏所选项目下拉菜单中的选项。因此，当用户选择该选项时，它将在所有下拉选择列表中隐藏所选值。我现在有四个下拉选择，我希望在触发下拉选择时启用当前选择的选项值（意味着用户能够在用户触发时选择下拉选择中的值）。我尝试使用此行代码禁用值$(this).find('option').prop('disabled', false);，但它仅适用于下拉选择的最后一次单击。任何人都可以帮助解决这个问题吗？

$(".firstname").on('change', function() {


  $(".firstname option").prop("disabled", false); //enable everything

  //collect the values from selected;
  var arr = $.map(
    $(".firstname option:selected"),
    function(n) {
      return n.value;
    }
  );

  //disable elements
  $(".firstname option").filter(function() {
    return $.inArray($(this).val(), arr) > -1; //if value is in the array of selected values
  }).prop("disabled", true);

  //re-enable elements
  $(".firstname option").filter(function() {
    return $.inArray($(this).val(), arr) == -1; //if value is not in the array of selected values
  }).prop("disabled", false);

  $(this).find('option').prop('disabled', false); //re-enable the current one
});


$('.savebtn').on('click', function() {
  $('.cbb').find('select option:selected').each(function(index, item) {
    var selectVal = $(this).val();
    console.log(selectVal);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cbb">


  <select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_148" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">

    <option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
    <option value="1">K-76</option>
    <option value="2">Af</option>
    <option value="3">A-c</option>/option>
    <option value="4">D-B</option>
    <option value="5">329</option>
    <option value="6">F-g</option>
    <option value="7">AT</option>
  </select>

  <select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_149" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">

    <option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
    <option value="1">K-76</option>
    <option value="2">Af</option>
    <option value="3">A-c</option>/option>
    <option value="4">D-B</option>
    <option value="5">329</option>
    <option value="6">F-g</option>
    <option value="7">AT</option>
  </select>
  <select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_149" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">

    <option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
    <option value="1">K-76</option>
    <option value="2">Af</option>
    <option value="3">A-c</option>/option>
    <option value="4">D-B</option>
    <option value="5">329</option>
    <option value="6">F-g</option>
    <option value="7">AT</option>
  </select>

  <select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_150" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">

    <option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
    <option value="1">K-76</option>
    <option value="2">Af</option>
    <option value="3">A-c</option>/option>
    <option value="4">D-B</option>
    <option value="5">329</option>
    <option value="6">F-g</option>
    <option value="7">AT</option>
  </select>

</div>
<button type="button" class="btn btn-primary savebtn">Save</button>

Answer 1

您只能使用一个 each 循环并遍历所有选择并禁用其他具有相同值的选择的值。另外，要排除被迭代禁用的选择选项，您可以使用not(this)。

演示代码：

$(".firstname").on('change', function() {
  //enable all
  $("select.firstname option").prop('disabled', false)
  //loop through select box
  $("select.firstname").each(function() {
    var values = $(this).val()
    if (values != "-1") {
      //find option where value matches disable them
      $("select.firstname").not(this).find("option[value=" + values + "]").prop('disabled', true);
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cbb">


  <select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_148" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">

    <option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
    <option value="1">K-76</option>
    <option value="2">Af</option>
    <option value="3">A-c</option>/option>
    <option value="4">D-B</option>
    <option value="5">329</option>
    <option value="6">F-g</option>
    <option value="7">AT</option>
  </select>

  <select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_149" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">

    <option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
    <option value="1">K-76</option>
    <option value="2">Af</option>
    <option value="3">A-c</option>/option>
    <option value="4">D-B</option>
    <option value="5">329</option>
    <option value="6">F-g</option>
    <option value="7">AT</option>
  </select>
  <select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_149" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">

    <option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
    <option value="1">K-76</option>
    <option value="2">Af</option>
    <option value="3">A-c</option>/option>
    <option value="4">D-B</option>
    <option value="5">329</option>
    <option value="6">F-g</option>
    <option value="7">AT</option>
  </select>

  <select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_150" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">

    <option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
    <option value="1">K-76</option>
    <option value="2">Af</option>
    <option value="3">A-c</option>/option>
    <option value="4">D-B</option>
    <option value="5">329</option>
    <option value="6">F-g</option>
    <option value="7">AT</option>
  </select>

</div>
<button type="button" class="btn btn-primary savebtn">Save</button>

Answer 2

事实证明它有点复杂，因为有多个选择。

在重新启用过滤器中，我添加了对每个选项的父选择的检查，以查看它的值是什么以及它是否等于选项的值：

另见this question。显然，您不能只在 <select> 的 onChange 中执行 $(this).val();。它必须是 vanilla js this.value 或在您的情况下为 $( //some-jquery-object// )[0].value。 （[0] 将 jquery 对象转换为 vanilla js 元素。）

return $.inArray($(this).val(), arr) == -1 || $(this).parent('select')[0].value == $(this).val() }).prop("disabled", false);

$(".firstname").on('change', function() {


  $(".firstname option").prop("disabled", false); //enable everything

  //collect the values from selected;
  var arr = $.map(
    $(".firstname option:selected"),
    function(n) {
      return n.value;
    }
  );

  //disable elements
  $(".firstname option").filter(function() {
    return $.inArray($(this).val(), arr) > -1; //if value is in the array of selected values
  }).prop("disabled", true);


  
  //re-enable elements
  $(".firstname option").filter(function() {
    
    //console.log( $(this).parent('select')[0].value, $(this).val());
    
    return $.inArray($(this).val(), arr) == -1 || $(this).parent('select')[0].value == $(this).val() //if value is not in the array of selected values
  }).prop("disabled", false);

  //$(this).find('option:selected').prop('disabled', false); //re-enable the current one
});


$('.savebtn').on('click', function() {
  $('.cbb').find('select option:selected').each(function(index, item) {
    var selectVal = $(this).val();
    console.log(selectVal);
  });
});

$parentSelect.find('option:selected').prop('value') == $parentSelect[0].value;

console.log($parentSelect.find('option:selected').prop('value'), $parentSelect[0].value)
console.log($parentSelect.find('option:selected').prop('value'), $parentSelect[0].value)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cbb">

  <select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_148" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">
    <option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
    <option value="1">K-76</option>
    <option value="2">Af</option>
    <option value="3">A-c</option>/option>
    <option value="4">D-B</option>
    <option value="5">329</option>
    <option value="6">F-g</option>
    <option value="7">AT</option>
  </select>

  <select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_149" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">
    <option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
    <option value="1">K-76</option>
    <option value="2">Af</option>
    <option value="3">A-c</option>/option>
    <option value="4">D-B</option>
    <option value="5">329</option>
    <option value="6">F-g</option>
    <option value="7">AT</option>
  </select>
  
  <select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_149" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">
    <option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
    <option value="1">K-76</option>
    <option value="2">Af</option>
    <option value="3">A-c</option>/option>
    <option value="4">D-B</option>
    <option value="5">329</option>
    <option value="6">F-g</option>
    <option value="7">AT</option>
  </select>

  <select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_150" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">
    <option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
    <option value="1">K-76</option>
    <option value="2">Af</option>
    <option value="3">A-c</option>/option>
    <option value="4">D-B</option>
    <option value="5">329</option>
    <option value="6">F-g</option>
    <option value="7">AT</option>
  </select>

</div>
<button type="button" class="btn btn-primary savebtn">Save</button>