javascript - 如何检查所选选项的价值是否高于另一个下拉菜单中的选项?
问题描述
所以我在 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>
我想做的是,当用户在第一个下拉列表中选择某个数字时,禁用第二个下拉列表中价值较低的数字。例如,如果我选择 400,则应在下拉菜单中禁用“小于 200”和“200”选项。
我有点想知道如何解决这个问题,但我真的不知道如何检查用户选择的内容并据此进行测试。任何帮助表示赞赏!
解决方案
试试这样:
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>
通过遍历option
for 的值obj_2
,您可以将它们与 的值进行比较obj_1
并相应地禁用它们。
编辑:在 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>
推荐阅读
- django - 将短信 API 与 django 项目集成
- java - 如何代表用户获取 Oauth2 令牌请求
- objective-c - 在 macOS 11 Big Sur 中禁用了 NSSavePanel 附件视图
- c# - 奇怪的字符串换行的东西
- c - 如何在不区分大小写的情况下比较两个字符串?
- xml - VSCode如何为使用URN xmlns的xml文件启用xml自动完成
- javascript - SAPUI5 使用 QuuniT 测试过滤的问题
- html-email - 在 gmail 中收到的 HTML 邮件,outlook 以删除
标记呈现 - javascript - 遍历数组列表jquery,然后对对象属性进行一些更改。更改后创建一个新的数组列表
- google-app-engine - Google App Engine:调试仪表板 > 流量 > 已发送