所以我有一个脚本,她有点做我想要的大部分,但有3件事它不做,我希望它做....
使选择选项,并且始终可以选择0值且永不禁用
在加载时已选择的所有其他下拉列表中禁用选择选项,但选择选项,当然值为0。
使用此代码,您可以了解如何禁用列表中的所有选项...我不希望它执行此操作...如果您选择一个选项并希望再次启用它以获取其他下拉列表如果你玩下拉菜单,你会看到我在说什么。
非常感谢任何帮助!我对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>
编辑:让这个更加清晰,抱歉混淆
答案 0 :(得分:1)
本地变量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>