javascript - 在除 0 以外的其他下拉菜单中禁用选择选项

Question

所以我有一个脚本，大部分情况下它都能满足我的要求，但有 3 件事它没有做到，但我希望它能做到......

1. 使selects值为0的选项始终处于选中状态，永远不会被禁用

2. 在加载时已选择的所有其他下拉列表中禁用 selects 选项，当然 selects 选项除外，值为 0。

3. 使用此代码，您可以了解如何禁用列表中的所有选项...我不希望它这样做...如果您选择一个选项并希望为其他下拉菜单再次启用它，如果你玩下拉菜单，你就会明白我在说什么。

非常感谢任何帮助!我对 JS/JQuery 一点都不擅长。

$(document).ready(function() {
  $("select").on('hover', function() {
    $previousValue = $(this).val();
  }).change(function() {
    $("select").not(this).find("option[value='" + $(this).val() + "']").attr('disabled', true);
    $("select").not(this).find("option[value='" + $previousValue + "']").attr('disabled', false);

  });

});

$("#confirm-form").submit(function(e) {
  e.preventDefault();
  $("select").find("option").removeAttr('disabled');
  document.getElementById('confirm-form').submit();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<select id="select1">
  <option value="0">--Please choose--</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
</select>
<br><br>
<select id="select2">
  <option value="0">--Please choose--</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
</select>
<br><br>
<select id="select3">
  <option value="0">--Please choose--</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
</select>
<br><br>
<select id="select4">
  <option value="0">--Please choose--</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
</select>

编辑:让这更清楚一点，抱歉造成混淆

Answer 1

局部变量 previousValue 不应该在函数外工作，除了两种情况，返回或作用域，所以这就是为什么你应该捕获它以便在邻居函数 中使用它改变()。

// Add your javascript here
$(document).ready(function() {
  $("select").focus(function() {
      previousValue = $(this).val();
      console.log(previousValue);
  $(this).change(
     function() {
      if($(this).val()!=="0"){
      $("select").not(this).find("option[value='" + $(this).val() + "']").attr('disabled', true);}
      $("select").not(this).find("option[value='" + previousValue + "']").attr('disabled', false);    
     })
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1"> 
  <option value="0">--Please choose--</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
</select>
<br><br>
<select id="select2">
  <option value="0">--Please choose--</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
</select>
<br><br>
<select id="select3">
  <option value="0">--Please choose--</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
</select>
<br><br>
<select id="select4">
  <option value="0">--Please choose--</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
</select>