javascript - 当您不知道 ID 时启用顺序选择菜单

Question

我有一组选择菜单，它们是根据产品数据库 (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 来排序启用/禁用选择菜单？

这只是一个疯狂的想法吗？我会更好地尝试动态构建 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/