Chosen Selector

Question

I have multiple instances of chosen selector being used in a page. Totally 5 instances as you can see in the code(Fiddle link enclosed below).

I wanted a system as in, when an option is selected from the first dropdown-selector, that particular option should be disabled in all the following dropdown-selectors. This system should work for all the 5 dropdown-selectors.

Can this system be achieved? I am able to get the values on click/selection of an option. But not able to create a perfect logic.

I have updated the code on 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>

Answer 1

I was able to achieve this system with a little help from my friend!

Updated Solution : 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>

Answer 2

Here is your code fixed. I guess its pretty self-explaining. i used a pseudo-class to identify the current <select> which has changed and to update the other options. After that you need to trigger chosen update with $(".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");

    });
});