限制下拉列表的范围答案

【问题标题】：Restricting range of drop-down lists限制下拉列表的范围
【发布时间】：2013-07-11 19:45:28
【问题描述】：

我在 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"]');
});

【问题讨论】：

请说说你尝试了什么？
@MohammadAreebSiddiqui 我的代码中的“真实”下拉列表具有name 属性，因此我可以在 jQuery 中选择它们。我之前自己尝试过 onChange ，我可以从中获得选定的值，但我无法开始工作的是从另一个下拉列表中删除值（更大或更小）....
将相关代码添加到您的问题中。
@MohammadAreebSiddiqui 我已经稍微更新了代码（添加了 name 和 id 属性），但实际代码与这个简化代码没有太大区别。
我在谈论你的 jQuery，你有什么尝试创建这个 uptill？我们是来帮助您避免项目的？

标签： javascript jquery html drop-down-menu range

【解决方案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);
});

【讨论】：

【解决方案2】：

我稍微更改了 Raman Chodź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);
});

【讨论】：

【解决方案3】：

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

【讨论】：

我想动态选择列表会起作用，但对于只有数值的列表来说似乎有点“矫枉过正”，对吧？
是的，我只是指通过使用 onChange jquery 事件然后隐藏/禁用剩余选项的方法的精神；）

【解决方案4】：

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

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

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

【讨论】：