限制下拉列表的范围

Question

我有两个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>

我想限制这些输入，以便当用户在第一个下拉列表中选择“三”时，值“一”和“二”在第二个下拉列表中被完全删除（或禁用），反之亦然：当用户在第二个下拉列表中选择“四”时，我想从第一个下拉列表中删除“五”。（有点像一个范围滑块）

我知道这应该可以通过一些jQuery代码，但谁能解释一下怎么做？

编辑：

添加了一些我曾经使用过的jQuery代码，我可以选择当前值并获得下一个下拉元素。但是，我如何才能禁用“to”的值，这些值小于“from”元素中的当前值，反之亦然。

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

Answer 1

并不是用很少的代码就能做到这一点的。我就是这么做的。

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);
});