jQuery - Disabling or Removing Options from a Menu

Question

I am working on a menu and I want the options within it to be mutually exclusive. For example, if they select Low Importance, then High Importance should not be an option, and if they select Low Urgency then High Urgency should not be an option either. How can I achieve this using jQuery?

 <label>Select the priority level of the task:&nbsp;</label>
 <select id="taskPriority" name="priority[]" multiple="multiple">
      <option value="lowImp">Low Importance</option>
      <option value="highImp">High Importance</option>
      <option value="lowUrg">Low Urgency</option>
      <option value="highUrg">High Urgency</option>
 </select>

Did you check this: http://stackoverflow.com/questions/1518216/jquery-remove-options-from-select — ced-b, Aug 16 '13 at 02:21
How can the option in that thread be combined with a conditional statement? The app is actually very simple: it captures the values of the form elements and then outputs them to a div. So I'm not 100% sure of where to try and insert the if statement. http://jsfiddle.net/aa_navarro/vkkG4/8/ — navarro, Aug 16 '13 at 02:29

jdepypere · Accepted Answer · 2013-08-16T02:41:43.567

I've made something that checks when the selection changes: http://jsfiddle.net/ckyBj/1/

This is probably th ugliest code I've written, but it works. You can probably make it a lot more compact though.

$(document).ready(function () {
    $('#taskPriority').on('change', function () {
        var theval = $(this).val();
        console.log(theval);
        if (jQuery.inArray('lowImp',theval) > -1) {
            $('#taskPriority').find('option[value=highImp]').prop('disabled', true);
        } 
        if (jQuery.inArray('highImp',theval) > -1) {
            $('#taskPriority').find('option[value=lowImp]').prop('disabled', true);
        }
        if (jQuery.inArray('lowUrg',theval) > -1) {
            $('#taskPriority').find('option[value=highUrg]').prop('disabled', true);
        }
        if (jQuery.inArray('highUrg',theval) > -1) {
            $('#taskPriority').find('option[value=lowUrg]').prop('disabled', true);
        }
        if(jQuery.inArray('lowImp',theval) == -1){
              $('#taskPriority').find('option[value=highImp]').prop('disabled',false);
        }
        if(jQuery.inArray('highImp',theval) == -1){
              $('#taskPriority').find('option[value=lowImp]').prop('disabled',false);
        }
        if(jQuery.inArray('lowUrg',theval) == -1){
              $('#taskPriority').find('option[value=highUrg]').prop('disabled',false);
        }
        if(jQuery.inArray('highUrg',theval) == -1){
              $('#taskPriority').find('option[value=lowUrg]').prop('disabled',false);
        }
    });
});

jQuery - Disabling or Removing Options from a Menu

1 Answers1