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：

＆＃13;

$('.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.

＆＃13;

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

＆＃13;

Answer 2

首先更改ID（不能相同），在添加disable并将id添加到选项5（默认值为1）并在第一个下拉列表中选中wich

<option disabled>Five</option>

$("#mySelect").change(function() {
    //if($("#mySelect").selected() == "one")
    if ($("#mySelect").val() == "One")
       $("#five").prop("disabled", true);
    else 
       $("#five").prop("disabled", false);
});

FIDDLE

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

2 个答案: