javascript - 如何在 HTML 网页中禁用下拉选项

Question

我有一个包含三个下拉菜单的网页。它工作正常，除了一个问题。

当我们从一个下拉列表中选择任何项目时，它会在其他两个下拉列表中被禁用，但如果我们再次从第一个下拉列表中选择另一个项目，那么它会禁用该项目，但它也会禁用之前选择的项目。

禁用新选项时应启用先前选择的选项。

代码如下:

<select id="select1" name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option value="1"> Accounting</option>
  <option value="2"> Afrikaans</option>
  <option value="3"> Applied Information and Communication Technology</option>
  <option value="4"> Arabic</option>
  <option value="5"> Art and Design</option>
  <option value="6"> Biology</option>
  <option value="7"> Business Studies</option>
</select>

<select id="select2" name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option value="1"> Accounting</option>
  <option value="2"> Afrikaans</option>
  <option value="3"> Applied Information and Communication Technology</option>
  <option value="4"> Arabic</option>
  <option value="5"> Art and Design</option>
  <option value="6"> Biology</option>
  <option value="7"> Business Studies</option>
</select>

<select id="select3" name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option value="1"> Accounting</option>
  <option value="2"> Afrikaans</option>
  <option value="3"> Applied Information and Communication Technology</option>
  <option value="4"> Arabic</option>
  <option value="5"> Art and Design</option>
  <option value="6"> Biology</option>
  <option value="7"> Business Studies</option>
</select>

这是 JavaScript 代码:

$(document).ready(function(){  
  $("select").change(function() {   
    $("select").not(this).find("option[value="+ $(this).val() + "]").attr('disabled', true);
  }); 
}); 

演示链接:http://jsfiddle.net/x4E5Q/137/

Answer 1

jsFiddle

将focus事件和change事件结合起来实现你想要的:

JavaScript

$(document).ready(function () {
    var previous;

    $("select").focus(function () {
        // Store the current value on focus and on change
        previous = this.value;
    }).change(function () {
        // Do something with the previous value after the change

        $("select").not(this).find("option[value=" + previous + "]").prop('disabled', false);
        $("select").not(this).find("option[value=" + $(this).val() + "]").prop('disabled', true);
        // Make sure the previous value is updated
        previous = this.value;
    });
});