时间戳

首页 > 解决方案 > 在除 0 之外的其他下拉列表中禁用选择选项

javascript - 在除 0 之外的其他下拉列表中禁用选择选项

问题描述

所以我有一个脚本，她在很大程度上做了我想做的事，但有 3 件事它没有做，我希望它做......

  1. 让它如此选择始终可以选择具有 0 值的选项并且永远不会禁用

  2. 禁用选择加载时已选择的所有其他下拉列表中的选项，除了选择选项当然值为 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>

编辑：让这更清楚一点，抱歉混淆

标签： javascriptjquerydropdown

解决方案

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

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

推荐阅读