Question

我有一组Select菜单，它们是根据产品数据库（WooCommerce）中的变体构建的。可以有任意数量，通常从3到8.简单的事情如下：

<select id="*Could be Anything*" name="*Could be Anything*">
    <option>Choose an option...</option>
    <option value="1">Test</option>
    <option value="2">Test 2</option>
</select>

<select id="*Could be Anything*" name="*Could be Anything*" disabled="true">
    <option>Choose an option...</option>
    <option value="1">Test</option>
    <option value="2">Test 2</option>
</select>

<select id="*Could be Anything*" name="*Could be Anything*" disabled="true">
    <option>Choose an option...</option>
    <option value="1">Test</option>
    <option value="2">Test 2</option>
</select>

我想根据在上一个菜单中进行的选择顺序启用它们。我不需要在新菜单中更改任何选项 - 我只需要启用它。

所以，如果Select1≠“选择一个选项...”然后启用Select2，如果Select2≠“选择一个选项......”则启用Select3。

问题是我无法预测ID会是什么，所以我不能使用以下变体：

$(function() {
    $("#theID").change(function() {
        if ($(this).val() == "Choose an option…") {
            $("#theID_2").prop("disabled", true);
        }
        else
            $("#theID_2").prop("disabled", false);
    });
});

我的问题是：有没有办法在不事先知道ID的情况下使用jQuery单独启用/禁用Select菜单？

这只是一个疯狂的想法吗？我是否会更好地尝试在运行中构建javascript，读取ID是否已写入Selects服务器端？

Answer 1

如果选择按顺序排列，您可以使用JQuery.next（）：

http://api.jquery.com/next/

$("select").on('change', function(){
    $(this).next("select").prop("disabled", false);
});

示例：

http://jsfiddle.net/Zv72Y/

Answer 2

如果所有这些选择在一个容器中，那么您可以为每个容器附加一个事件监听器，这将解锁下一个选择元素：

HTML：

<div class='container'>
    <select id="*Could be Anything*" name="*Could be Anything*">
        <option>Choose an option...</option>
        <option value="1">Test</option>
        <option value="2">Test 2</option>
    </select>

    <select id="*Could be Anything*" name="*Could be Anything*" disabled="true">
        <option>Choose an option...</option>
        <option value="1">Test</option>
        <option value="2">Test 2</option>
    </select>

    <select id="*Could be Anything*" name="*Could be Anything*" disabled="true">
        <option>Choose an option...</option>
        <option value="1">Test</option>
        <option value="2">Test 2</option>
    </select>
</div>

javascipt的：

$('.container').on('change','select', function(){    
    $(this).nextAll('select').first().removeAttr('disabled');
});

$().nextAll() - 获取匹配元素集中每个元素的所有后续兄弟，可选择由选择器过滤。

.first()会先选择当前选择并从他身上删除attritbute disabled。

Example: jsFiddle

如果您不知道ID，请启用顺序选择菜单

2 个答案: