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

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");

    });
});

Answer 2

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>