jQuery在选择菜单中禁用兄弟选项

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>

因此，如果在 option1 上选择了“A”，我需要在 option2 上禁用“A”。我尝试了很多东西都无济于事。我尝试使用兄弟姐妹，我所能做的就是禁用整个选择菜单而不是特定选项。有什么想法吗？

Answer 1

这里有一些东西给你（参见代码中的 cmets 以了解它是如何工作的）：

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

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

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