我有两个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"]');
});
并不是用很少的代码就能做到这一点的。我就是这么做的。
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);
});
