3

I want to take user's preference with select2. Upon selecting one option the option in other select2 should disable.

Sample:

Preference 1: Option 1 Option 2 Option 3 Option 4

Preference 2: Option 1 Option 2 Option 3 Option 4

Preference 3: Option 1 Option 2 Option 3 Option 4

Preference 4: Option 1 Option 2 Option 3 Option 4

If I select option 1 in preference 1 it should disable in preferences 1,2,3,4 and if I select option 2 in preference 2 it should disable in preferences 1,2,3,4 and if I select option 3 in preference 3 it should disable in preferences 1,2,3,4

Again and if I select option 4 in preference 2 it should disable in preferences 1,2,3,4 and option 2 should be available for select in Preferences 3&4.

I have tired various implementations but stuck. Help me out.

HTML:

<div class="form-group col-md-6 m-t-sm">
    <label> Select Preference 1: </label>
    <select class="form-control" id="pref1" name="pref1" style="width:100%">
    <option value=""> Select Campus Preference 1 </option>
    <option value="N"> N </option>
    <option value="O"> O </option>
    <option value="R"> R </option>
    <option value="S"> S </option>
    </select>
    <label id="pref1-error" class="error" for="pref1"></label>
</div>
.
.
.

My current js:

$('select[name*="pref"]').change(function(){

    // start by setting everything to enabled
    $('select[name*="pref"] option').prop('disabled',false);

    // loop each select and set the selected value to disabled in all other selects
    $('select[name*="pref"]').each(function(){ 
        var $this = $(this);
        $('select[name*="pref"]').not($this).find('option').each(function(){
           if($(this).attr('value') == $this.val()){            
               $(this).prop('disabled',true);               
           }
        });
    });

});

1 Answer 1

5

you can reinitialize select after disabling it use following code

$("select").select2("destroy").select2();

something like

$('select[name*="pref"]').change(function(){

    // start by setting everything to enabled
    $('select[name*="pref"] option').prop('disabled',false);

    // loop each select and set the selected value to disabled in all other selects
    $('select[name*="pref"]').each(function(){ 
        var $this = $(this);
        $('select[name*="pref"]').not($this).find('option').each(function(){
           if($(this).attr('value') == $this.val()){            
               $(this).prop('disabled',true);               
           }
        });
    });
    $('select[name*="pref"]').select2("destroy").select2();
});

hope i am getting you right

4
  • am not getting you @Vamshi May 5, 2017 at 11:49
  • But, once all four options are set, all are disabled and there is no means of resetting options, right? except page refresh. If user wants to change the preferences, what's the best way to do it?
    – Vamshi
    May 6, 2017 at 6:32
  • @Vamshi you could put a button called reset preferences which enables all the options May 8, 2017 at 5:38
  • Yeah.. Thanks. I did that. var $clear = $("#pref1, #pref2, #pref3, #pref4").select2(); $("#prefclear").on("click", function () { $clear.val(null).trigger("change"); });
    – Vamshi
    May 9, 2017 at 4:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.