选择器

Question

我在一个页面中使用了多个 chosen 选择器 实例。正如您在代码中看到的那样，总共有 5 个实例（Fiddle link 包含在下面）。

我想要一个系统，当从第一个下拉选择器中选择一个选项时，该特定选项应该在所有以下下拉选择器中被禁用。该系统应该适用于所有 5 个下拉选择器。

这个系统能实现吗？我能够获得选项 click/selection 的值。但无法创造出完美的逻辑。

上更新了代码

<div>
<div class="space">
1.
<select class="chosen rank-select form-control" style="width: 350px;">
  <option value="-1" selected disabled>Please Select</option>
  <option value="1">Item 01</option>
  <option value="2">Item 02</option>
  <option value="3">Item 03</option>
  <option value="4">Item 04</option>
  <option value="5">Item 05</option>
</select>
</div>
</div>

Answer 1

您的代码已修复。我想它很漂亮 self-explaining。我使用 pseudo-class 来识别已更改的当前 <select> 并更新其他选项。之后，您需要使用 $(".chosen").trigger("chosen:updated");.

触发所选更新

$(document).ready(function(){
    $(".chosen").chosen();

    $(".rank-select").chosen().change(function() {

        //get value
        var value = $(this).val();

        //EDIT
        //un-disable all
        $('.chosen option').attr ('disabled', false);

        //set marker to current select
        $(this).addClass('current_sel');

        //disable option        
        $(".chosen").each (function (i) {

            if (!$(this).hasClass ('current_sel'))
                $(this).find ('option[value="' + value + '"]').attr ('disabled', true);

        });

        //remove marker  
        $(this).removeClass('current_sel');

        //update chosen
        $(".chosen").trigger("chosen:updated");

    });
});

Answer 2

在朋友的帮助下，我才能够实现这个系统！

更新的解决方案：https://jsfiddle.net/ugsn74v1/277/

$(document).ready(function() {
  $(".chosen").chosen();
  var selectDropdownArray = []; //storing the dropdown pos based on user selection
  var selectValArrray = []; //storing the values selected in dropdown
  $(".rank-select").chosen().change(function() {
    var selectedVal = $(this).val();
    var dropdownPos = $(this).closest('.space').index();

    //checcking for if condition if the user is coming first to dropdown or second time
    if (selectDropdownArray.indexOf(dropdownPos) === -1) {
      for (var i = dropdownPos; i < $('div.dropdown-cont').children().length; i++) {
        var currEle = $('div.dropdown-cont').children()[i];
        var currDropdown = $(currEle).children()[0];
        $(currDropdown).find('option[value="' + selectedVal + '"]').attr('disabled', true);
      }
      selectDropdownArray.push(dropdownPos);
      selectValArrray.push(selectedVal);
      $(".chosen").trigger("chosen:updated");
    } else {
      //
      for (var i = selectDropdownArray.length - 1; i > dropdownPos; i--) {
        var currEle = $('div.dropdown-cont').children()[i];
        var currDropdown = $(currEle).children()[0];
        if (i > dropdownPos) {
          $(currDropdown).val('-1')
        }
        $(currDropdown).find('option').removeAttr('disabled', true);
        selectDropdownArray.pop(selectDropdownArray[i - 1]);
        selectValArrray.pop(selectValArrray[i - 1]);
      }
      selectValArrray[dropdownPos] = selectedVal;
      for (var j = dropdownPos; j < $('div.dropdown-cont').children().length; j++) {
        var currEle = $('div.dropdown-cont').children()[j];
        var currDropdown = $(currEle).children()[0];
        $(currDropdown).find('option').removeAttr('disabled', true);
      }
      for (var i = 0; i < selectValArrray.length; i++) {
        for (var j = dropdownPos; j < $('div.dropdown-cont').children().length; j++) {
          var currEle = $('div.dropdown-cont').children()[j];
          var currDropdown = $(currEle).children()[0];
          $(currDropdown).find('option[value="' + selectValArrray[i] + '"]').attr('disabled', true);
        }
      }
    }
    //update chosen       
    $(".chosen").trigger("chosen:updated");
  });
});

.space {
  margin: 30px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css" rel="stylesheet" />

<div class="dropdown-cont">
  <div class="space">
    1.
    <select class="chosen rank-select form-control" style="width: 350px;">
      <option value="-1" selected disabled>Please Select</option>
      <option value="1">Item 01</option>
      <option value="2">Item 02</option>
      <option value="3">Item 03</option>
      <option value="4">Item 04</option>
      <option value="5">Item 05</option>
  </select>
  </div>

  <div class="space">
    2.
    <select class="chosen rank-select form-control" style="width: 350px;">
      <option value="-1" selected disabled>Please Select</option>
      <option value="1">Item 01</option>
      <option value="2">Item 02</option>
      <option value="3">Item 03</option>
      <option value="4">Item 04</option>
      <option value="5">Item 05</option>
  </select>
  </div>


  <div class="space">
    3.
    <select class="chosen rank-select form-control" style="width: 350px;">
      <option value="-1" selected disabled>Please Select</option>
      <option value="1">Item 01</option>
      <option value="2">Item 02</option>
      <option value="3">Item 03</option>
      <option value="4">Item 04</option>
      <option value="5">Item 05</option>
  </select>
  </div>

  <div class="space">
    4.
    <select class="chosen rank-select form-control" style="width: 350px;">
      <option value="-1" selected disabled>Please Select</option>
      <option value="1">Item 01</option>
      <option value="2">Item 02</option>
      <option value="3">Item 03</option>
      <option value="4">Item 04</option>
      <option value="5">Item 05</option>
  </select>
  </div>

  <div class="space">
    5.
    <select class="chosen rank-select form-control" style="width: 350px;">
      <option value="-1" selected disabled>Please Select</option>
      <option value="1">Item 01</option>
      <option value="2">Item 02</option>
      <option value="3">Item 03</option>
      <option value="4">Item 04</option>
      <option value="5">Item 05</option>
  </select>
  </div>
</div>

选择器

Chosen Selector

javascript

jquery-chosen

drop-down-menu

prototype-chosen