当您不使用'我不知道身份证

Enable Sequential Select Menus when you don't know the IDs

本文关键字：我不知道 身份证      更新时间：2023-09-26

我有一组选择菜单，它们是根据产品数据库（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≠"Choose an option…"，则启用Select2，如果Select2≠"Choose an options…"则启用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，读取它们是否写入Selects服务器端的id？

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

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

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

示例：

http://jsfiddle.net/Zv72Y/

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

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()将选择当前后的第一个选择，并从中删除属性disabled。

示例：jsFiddle

相关文章：