У меня на странице используется несколько экземпляров выбранного селектора . Всего 5 экземпляров, как вы можете видеть в коде (ссылка Fiddle прилагается ниже).

Мне нужна была система, в которой когда опция выбирается в первом выпадающем списке, эта конкретная опция должна быть отключена во всех следующих выпадающих селекторах. Эта система должна работать для всех 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>
0
Vinodh K 14 Мар 2018 в 11:21

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>
0
Vinodh K 19 Апр 2018 в 16:01

Вот ваш код исправлен. Думаю, это довольно самоочевидно. Я использовал псевдокласс, чтобы определить текущий <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");

    });
});
0
wayneOS 14 Мар 2018 в 09:37