1

我在 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 代码，我可以选择当前值并获取下一个下拉元素。但是如何禁用小于“From”元素中当前值的“To”值，反之亦然。

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

4 回答 4

2

没有设法用很少的代码做到这一点。这就是我所做的。

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);
});
于 2013-07-10T15:42:59.130 回答
1

我已经稍微更改了 Raman Chodźka 建议的代码，因此它不再依赖于 ID，并且我可以在一页上使用多个这些下拉列表。

这就是我所做的（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);
});
于 2013-07-11T11:39:48.397 回答
0

您必须在您的选择上添加一个 onChange（在现代浏览器上也可以与 onClick 选项一起使用，但我仍然建议 onChange）事件，该事件调用一个 js 函数，该函数的作用类似于人们在这里回答的内容：jQuery remove options from select

我建议在选择中添加一些 id，添加事件侦听器可以执行类似的操作$('#idSelect1').change(function() {bla bla})

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

于 2013-07-10T14:56:26.343 回答
0

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

于 2013-07-10T14:57:26.590 回答