Javascript 限制下拉列表的范围

我有两个HTML下拉列表，看起来很简单，如下所示：

<select name="from" id="abs-from-1">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

<select name="to" id="abs-to-1">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

---

您必须在现代浏览器上添加onChange，它也可以与onClick-on选项一起使用，但我仍然建议在您的选择上添加onChange事件，该事件调用一个js函数，该函数的作用类似于这里的人所回答的：

我建议向selects添加一些id，要添加事件侦听器，您可以执行类似$'idSelect1'.changefunction{bla bla}

---

或者，您可以直接在yout html中添加事件。

我猜您正在寻找一个动态选择列表：

---

在代码很少的情况下无法做到这一点

更新： 使用选项标记的顺序索引也可以是一个选项。还有一个

---

我对Raman Chodźka建议的代码做了一点修改，这样它就不再依赖ID了，我可以在一个页面上使用多个下拉列表

:

---

请告诉我你试过什么？@MohammadAreebSiddiqui我的代码中真正的下拉列表有名称属性，所以我可以在jQuery中选择它们。我以前也尝试过onChange，我可以从中获得所选的值，但我无法从另一个下拉列表中删除较大或较小的值……请将相关代码添加到您的问题中。@MohammadReebsiddiqui我已经更新了一点代码，添加了名称和id属性，但是真正的代码与这个简化的代码没有太大的区别。我刚才说的是你的jQuery，你是如何创建正常运行的？我们来这里是为了帮助你不去做你的项目？我想一个动态选择列表会有用，但是对于一个只有数值的列表来说似乎有点过分了，对吧？是的，我只是指使用onChange jquery事件，然后隐藏/禁用剩余选项的方法的精神；

$('[name="from"]').on("change", function() {
    var currentVal = $(this).attr('value');
    var toElem = $(this).next('[name="to"]');
});

var from = $('#abs-from-1');
var to = $('#abs-to-1');

from.change(function () {
    var selectedValue = parseInt($(this).val());
    to.find('option').prop('disabled', false).filter(function () {
        return parseInt(this.value) < selectedValue;
    }).prop('disabled', true);
});

to.change(function () {
    var selectedValue = parseInt($(this).val());
    from.find('option').prop('disabled', false).filter(function () {
        return parseInt(this.value) > selectedValue;
    }).prop('disabled', true);
});

var from = $('#abs-from-1');
var to = $('#abs-to-1');

from.change(function () {
    var selectedIndex = this.selectedIndex;
    to.find('option').prop('disabled', false).filter(function (index) {
        return index < selectedIndex;
    }).prop('disabled', true);
});

to.change(function () {
    var selectedIndex = this.selectedIndex;
    from.find('option').prop('disabled', false).filter(function (index) {
        return index > selectedIndex;
    }).prop('disabled', true);
});

$('[name="from"],[name="to"]').change(function () {
    var e = $(this);
    var val = parseInt($(this).val());
    e.siblings('[name="from"],[name="to"]').find('option').prop('disabled', false).filter(function () {
    return ((e.attr('name') == 'from') ? parseInt(this.value) < val : parseInt(this.value) > val);
    }).prop('disabled', true);
});