jquery - 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>

Answer 1

我做了一些检查选择何时更改的东西：http: //jsfiddle.net/ckyBj/1/

这可能是我写过的最丑陋的代码，但它确实有效。不过，您可能可以使它更紧凑。

$(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);
        }
    });
});