如何使下拉选项在HTML网页禁用

How to make the dropdown option disable in HTML web page

本文关键字：网页 HTML 何使下 选项      更新时间：2023-09-26

我有三个下拉的网页。除了一个问题外，一切正常。

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

当新选项被禁用时，之前选择的选项应该被启用。

代码如下:

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

Demo链接:http://jsfiddle.net/x4E5Q/137/

jsFiddle

将焦点事件与变更事件结合起来以实现您想要的:

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;
    });
});
相关文章：