如何检查所选选项的价值是否高于另一个下拉菜单中的选项？答案

【问题标题】：How to check if a selected option is of higher value than one from another dropdown?如何检查所选选项的价值是否高于另一个下拉菜单中的选项？
【发布时间】：2020-11-04 07:35:02
【问题描述】：

所以我在 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”选项。

我有点想知道如何解决这个问题，但我真的不知道如何检查用户选择的内容并据此进行测试。任何帮助表示赞赏！

【问题讨论】：

标签： javascript drop-down-menu dropdown html-select

【解决方案1】：

试试这样：

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 的值进行比较并相应地禁用它们。

编辑：在 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>

【讨论】：

嘿！非常感谢你做的这些！像魅力一样工作，我会马上接受你的回答:)
我在这个答案中添加了一个 jQuery 版本，以防仍然需要它。