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>

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

我知道这应该可以使用一些jQuery代码，但任何人都可以解释如何？

修改

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

$('[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);
});

Answer 2

我已经改变了RamanChodźka建议的代码，所以它不再依赖于ID了，我可以在一个页面上使用多个这些下拉列表。

This is what I've done (jsFiddle)：

$('[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);
});

Answer 3

你必须在你的选择上添加一个onChange（在现代浏览器上也可以使用onClick on options但我仍然建议使用onChange）事件调用一个js函数，它会像你们在这里回答的那样：jQuery remove options from select < / p>

我建议添加一些ID进行选择，要添加事件监听器，您可以执行$('#idSelect1').change(function() {bla bla})

之类的操作

或者你可以直接在你的HTML中添加事件。

Answer 4

猜猜你正在寻找动态选择列表： http://css-tricks.com/dynamic-dropdowns/

限制下拉列表的范围

4 个答案: