限制下拉列表的范围 [英] Restricting range of drop-down lists

问题描述

我在HTML中找到两个下拉列表（简化）：

I have two drop-down lists in HTML looking (simplified) like this:

<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在第二个下拉列表中被完全删除（或禁用），反之亦然：当用户在第二个下拉菜单中选择Four时，我想要五从第一个下拉菜单中删除。 （Kinda像一个范围滑块）

I would like to restrict these inputs so that when a user selects "Three" in the first drop-down list, the values "One" and "Two" get completely removed (or disabled) in the second drop-down list and vice versa: when a user selects "Four" in the second drop-down, I would like to have "Five" removed from the first drop-down. (Kinda like a range-slider)

我知道这应该是可能的一个jQuery代码，但任何人都可以解释如何？

I know this should be possible with a little jQuery code but could anyone explain how?

编辑：

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

Added a little jQuery code I've played around with, I can select the current value and get the next drop-down element. But how can I disable the values of the "To" that are smaller then the current value in the "From" element, and vice versa.

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

推荐答案

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

I've changed the code suggested by Raman Chodźka a little bit so it doesn't rely on the ID's anymore and I can use multiple of these drop-down lists on one page.

这是我做的（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);
});

这篇关于限制下拉列表的范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！