javascript - 从下拉列表中禁用其对应项的某些选定选项

Question

我有 2 个下拉菜单。当我选择选项一时，我希望从第二个下拉列表中禁用选项五。

我怎样才能做到这一点。下面是下拉代码。

<form>
  <select class="mySelect">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
  </select>
</form>

<br>

<form>
  <select class="mySelect">
    <option>Four</option>
    <option>Five</option>
    <option>Six</option>
  </select>
</form>

这是fiddle为此。

Answer 1

首先，您应该注意到，您不能对一个页面中的多个元素使用相同的 id。每个元素的 Id 必须是唯一的。

根据您的情况，您可以将其更改为class:

$('.mySelect:eq(0)').change(function(){
  $('option:contains(Five)').prop('disabled', this.value == "One");
}).change(); // <---this makes sure to fire the change event on doc ready
             // because you have option with value "one" already selected.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select class="mySelect">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
  </select>
</form>

<br>

<form>
  <select class="mySelect">
    <option>Four</option>
    <option>Five</option>
    <option>Six</option>
  </select>
</form>