如何检查所选选项的价值是否高于另一个下拉菜单的价值? [英] How to check if a selected option is of higher value than one from another dropdown?
本文介绍了如何检查所选选项的价值是否高于另一个下拉菜单的价值?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我在html中有这两个下拉列表，如下所示:
So I have these two dropdown lists in html that look like this :
<SELECT name="obj_1" size="1" class="archive-select">
<OPTION selected disabled>from</OPTION>
<OPTION value="1">Less than 200</OPTION>
<OPTION value="200">200</OPTION>
<OPTION value="400">400</OPTION>
<OPTION value="600">600</OPTION>
<OPTION value="800">800</OPTION>
<OPTION value="1000">1'000</OPTION>
<OPTION value="1200">1'200</OPTION>
<OPTION value="1400">1'400</OPTION>
<OPTION value="1600">1'600</OPTION>
<OPTION value="1800">1'800</OPTION>
<OPTION value="2000">2'000</OPTION>
<OPTION value="2200">2'200</OPTION>
<OPTION value="2400">2'400</OPTION>
<OPTION value="2600">2'600</OPTION>
<OPTION value="2800">2'800</OPTION>
<OPTION value="3000">3'000</OPTION>
</SELECT><br>
<SELECT name="obj_2" size="1" style="margin-bottom:15px;" class="archive-select">
<OPTION selected disabled>to</OPTION>
<OPTION value="200">200</OPTION>
<OPTION value="400">400</OPTION>
<OPTION value="600">600</OPTION>
<OPTION value="800">800</OPTION>
<OPTION value="1000">1'000</OPTION>
<OPTION value="1200">1'200</OPTION>
<OPTION value="1400">1'400</OPTION>
<OPTION value="1600">1'600</OPTION>
<OPTION value="1800">1'800</OPTION>
<OPTION value="2000">2'000</OPTION>
<OPTION value="2200">2'200</OPTION>
<OPTION value="2400">2'400</OPTION>
<OPTION value="2600">2'600</OPTION>
<OPTION value="2800">2'800</OPTION>
<OPTION value="3000">3'000</OPTION>
<OPTION value="300000">More than 3'000</OPTION>
</SELECT>
我想做的是，当用户在第一个下拉列表中选择某个数字时，要禁用第二个下拉列表中较低值的数字.例如，如果我选择400，则选项小于200"将显示为小于200".和"200"应该在下拉菜单中禁用.
What I would like to do, is when the user selects in the first dropdown a certain number, to disable the ones that are of lower value in the second dropdown list. For example if I select 400, the options "Less than 200" and "200" should be disabled in the dropdown.
我有点关于如何解决此问题的想法，但我只是真的不知道如何检查用户选择的内容并以此为基础进行测试.任何帮助表示赞赏！
I kind of have the idea on how to work around this, but I just don't really know how I can check what the user chose and do my tests based on that. Any help is appreciated !
推荐答案
尝试如下:
var obj_1 = document.querySelector('select[name="obj_1"]');
var obj_2_options = document.querySelectorAll('select[name="obj_2"] option');
obj_1.onchange = function() {
var val_1 = parseInt(obj_1.value.replace("'", ""));
for (var i = 0; i < obj_2_options.length; i++) {
var val_2 = parseInt(obj_2_options[i].value.replace("'", ""));
obj_2_options[i].disabled = (val_2 < val_1);
}
}
<SELECT name="obj_1" size="1" class="archive-select">
<OPTION selected disabled>from</OPTION>
<OPTION value="1">Less than 200</OPTION>
<OPTION value="200">200</OPTION>
<OPTION value="400">400</OPTION>
<OPTION value="600">600</OPTION>
<OPTION value="800">800</OPTION>
<OPTION value="1000">1'000</OPTION>
<OPTION value="1200">1'200</OPTION>
<OPTION value="1400">1'400</OPTION>
<OPTION value="1600">1'600</OPTION>
<OPTION value="1800">1'800</OPTION>
<OPTION value="2000">2'000</OPTION>
<OPTION value="2200">2'200</OPTION>
<OPTION value="2400">2'400</OPTION>
<OPTION value="2600">2'600</OPTION>
<OPTION value="2800">2'800</OPTION>
<OPTION value="3000">3'000</OPTION>
</SELECT><br>
<SELECT name="obj_2" size="1" style="margin-bottom:15px;" class="archive-select">
<OPTION selected disabled>to</OPTION>
<OPTION value="200">200</OPTION>
<OPTION value="400">400</OPTION>
<OPTION value="600">600</OPTION>
<OPTION value="800">800</OPTION>
<OPTION value="1000">1'000</OPTION>
<OPTION value="1200">1'200</OPTION>
<OPTION value="1400">1'400</OPTION>
<OPTION value="1600">1'600</OPTION>
<OPTION value="1800">1'800</OPTION>
<OPTION value="2000">2'000</OPTION>
<OPTION value="2200">2'200</OPTION>
<OPTION value="2400">2'400</OPTION>
<OPTION value="2600">2'600</OPTION>
<OPTION value="2800">2'800</OPTION>
<OPTION value="3000">3'000</OPTION>
<OPTION value="300000">More than 3'000</OPTION>
</SELECT>
通过遍历obj_2的option值，可以将它们与obj_1的值进行比较，并相应地禁用它们.
By looping through the option values for obj_2, you can compare them to the value of obj_1 and disable them accordingly.
在jQuery中，这将是:
In jQuery this would be:
var obj_1 = $('select[name="obj_1"]');
var obj_2_options = $('select[name="obj_2"] option');
obj_1.on('change', function() {
var val_1 = parseInt(obj_1.val().replace("'", ""));
obj_2_options.each(function() {
var val_2 = parseInt($(this).val().replace("'", ""));
$(this).attr('disabled', (val_2 < val_1));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<SELECT name="obj_1" size="1" class="archive-select">
<OPTION selected disabled>from</OPTION>
<OPTION value="1">Less than 200</OPTION>
<OPTION value="200">200</OPTION>
<OPTION value="400">400</OPTION>
<OPTION value="600">600</OPTION>
<OPTION value="800">800</OPTION>
<OPTION value="1000">1'000</OPTION>
<OPTION value="1200">1'200</OPTION>
<OPTION value="1400">1'400</OPTION>
<OPTION value="1600">1'600</OPTION>
<OPTION value="1800">1'800</OPTION>
<OPTION value="2000">2'000</OPTION>
<OPTION value="2200">2'200</OPTION>
<OPTION value="2400">2'400</OPTION>
<OPTION value="2600">2'600</OPTION>
<OPTION value="2800">2'800</OPTION>
<OPTION value="3000">3'000</OPTION>
</SELECT><br>
<SELECT name="obj_2" size="1" style="margin-bottom:15px;" class="archive-select">
<OPTION selected disabled>to</OPTION>
<OPTION value="200">200</OPTION>
<OPTION value="400">400</OPTION>
<OPTION value="600">600</OPTION>
<OPTION value="800">800</OPTION>
<OPTION value="1000">1'000</OPTION>
<OPTION value="1200">1'200</OPTION>
<OPTION value="1400">1'400</OPTION>
<OPTION value="1600">1'600</OPTION>
<OPTION value="1800">1'800</OPTION>
<OPTION value="2000">2'000</OPTION>
<OPTION value="2200">2'200</OPTION>
<OPTION value="2400">2'400</OPTION>
<OPTION value="2600">2'600</OPTION>
<OPTION value="2800">2'800</OPTION>
<OPTION value="3000">3'000</OPTION>
<OPTION value="300000">More than 3'000</OPTION>
</SELECT>
这篇关于如何检查所选选项的价值是否高于另一个下拉菜单的价值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
