我有 3 个下拉菜单,每个下拉菜单有 8 个选项。现在我的目标是将这 3 个下拉列表的组合值限制为 8。因此,例如,如果您在第一个中选择 7,则您只能在接下来的两个中选择 1,如果您在第二个中选择 1,则您不能在第二个中选择任何内容第三。
我试图通过禁用某些选项来实现我的目标,但我的逻辑存在缺陷。一旦我选择了一个选项,我就无法更改我选择的选项,因为我已经禁用了这些选项。任何人都知道我该如何解决这个问题?
提前致谢。
这是一个 jsfiddle 作为我的代码示例:
https://jsfiddle.net/k7krx87L/4/
我的 jQuery 代码:
$(".options select").change(function() {
var value1 = $("#input_1_5").val();
var value2 = $("#input_1_6").val();
var value3 = $("#input_1_7").val();
var sum = parseInt(value1) + parseInt(value2) + parseInt(value3);
var rest = 9-sum;
$("#input_1_6 > option").slice(rest,9).each(function() {
$(this).attr("disabled", true);
});
var rest2 = rest - 9
$("#input_1_7 > option").slice(rest2,9).each(function() {
$(this).attr("disabled", true);
});
});
最佳答案
您需要进行变量检查以查看要启用哪些项目
var $selects = $(".options select").change(function() {
var sum = 0;
$selects.each(function() {
sum += +this.value;
});
var rem = 9 - sum;
$selects.each(function() {
var max = +this.value + rem;
$(this).find('option').prop('disabled', function() {
return +this.value > max;
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="options">
<select name="" id="input_1_5">
<option value="0">0</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>
</select>
<select name="" id="input_1_6">
<option value="0">0</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>
</select>
<select name="" id="input_1_7">
<option value="0">0</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>
</select>
</div>
关于javascript - 通过 jQuery 将 3 个下拉列表限制为 8 个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36149329/