javascript - 限制下拉列表的范围

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>

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

我知道这应该可以通过一些 jQuery 代码实现，但是谁能解释一下如何实现？

编辑:

添加了一些我玩过的 jQuery 代码，我可以选择当前值并获取下一个下拉元素。但是如何禁用小于“From”元素中当前值的“To”值，反之亦然。

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

Answer 1

没能用很少的代码做到这一点。 That's what I've done .

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

更新:使用选项标签的序号索引也是一种选择。这是另一个 fiddle .

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