0

我在一个页面中使用了多个所选选择器的实例。您可以在代码中看到总共 5 个实例（下面附上小提琴链接）。

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

这个系统能实现吗？我能够获得单击/选择选项的值。但无法创建完美的逻辑。

我已经更新了https://jsfiddle.net/ugsn74v1/15/上的代码

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

2 回答 2

0

这是您修复的代码。我想它很不言自明。我使用了一个伪类来识别<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");

    });
});
于 2018-03-14T09:06:30.180 回答
0

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

更新的解决方案：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>

于 2018-03-22T09:31:31.287 回答