[英]How to check if a selected option is of higher value than one from another dropdown?
So I have these two dropdown lists in html that look like this :所以我在 html 中有这两个下拉列表,如下所示:
<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>
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.例如,如果我选择 400,则应在下拉列表中禁用“小于 200”和“200”选项。
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 !任何帮助表示赞赏!
Try like this:像这样尝试:
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>
By looping through the option
values for obj_2
, you can compare them to the value of obj_1
and disable them accordingly.通过循环obj_2
的option
值,您可以将它们与obj_1
的值进行obj_1
并相应地禁用它们。
EDIT: In jQuery this would be:编辑:在 jQuery 中,这将是:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.