Question

我在同一页面上有2个选择菜单，它们有一些相同的选项。如果选项与第一个选择菜单的选定选项相同，我需要能够从第二个选择菜单中禁用选项。

<select class="option1">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<select class="option2">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

所以如果＆＃34; A＆＃34;在option1上选中，我需要禁用＆＃34; A＆＃34;在option2上。我尝试了很多事无济于事。我尝试使用兄弟姐妹，而我设法做的就是禁用整个选择菜单而不是特定选项。有什么想法吗？

Answer 1

这里有适合您的内容（请参阅代码中的注释以获取有关其工作方式的说明）：

＆＃13;

// Let's react to option1 changing
$('select.option1').change(function() {
  // Get the selected text value from option1
  var selectedValue = $('option:selected', this).text();
  // Disable option2's options based on the text value
  $('select.option2 option').prop('disabled', function() {
    return $(this).text() == selectedValue;
  });
  
  // Missing from this:
  // If option2's selection is no longer enabled, set it to the first
  // non-disabled option instead
  
}).change(); // fire the change event to handle the initial selection

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="option1">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<select class="option2">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

＆＃13;

Answer 2

如果您的选项没有价值，您可以通过内容找到它

你可以这样做：

HTML

<select name="" id="s1">
    <option value="">01</option>
    <option value="">02</option>
    <option value="">03</option>
    <option value="">04</option>
    <option value="">05</option>
  </select>


  <select name="" id="s2">
    <option value="">01</option>
    <option value="">02</option>
    <option value="">03</option>
    <option value="">04</option>
    <option value="">05</option>
  </select>

的jQuery

$("#s1").change(function() {
  $("#s2 option").prop("disabled", false);

  var option = $(this).find("option:selected").html();
  $("#s2 option:contains('" + option + "')").prop("disabled", true);
});

Look result in JSBin

jQuery禁用选择菜单

2 个答案: