根据单选按钮单击</select>显示<select>

Question

拳头，让我说我最近才开始使用js / jquery（比如，2周前）我一直在靠墙打我的头，试图让所有下面的技巧很好地一起玩 - 非常感谢任何帮助。

我有一个表单，用户可以在其中注册多个人进行课程;在每个注册人的内部＆＃34;区块，＆＃34;存在两个单选按钮。选择一个应显示一组类选项，选择另一个应显示第二组选项：

HTML ：

<label for="name" class="label_heading">Registrant Name (first and last)</label>
<input type="text" id="name_1" value="name_1">
<br>
<p class="label_heading">Training Level:</p>
<label for="certification">
    <input type="radio" name="ClassLevel" value="certification" id="select-certification" class="select-certification">Certification

    <select class="copy hidden" name="cert" id="cert1">
        <option value="">Select a Certification Session</option>
        <option value="session1cert">Fort Dodge, IA May 5-9, 2014</option>
        <option value="session2cert">North Platte, NE Sept 22-26, 2014</option>
        <option value="session3cert">Omaha, NE Oct 13-17, 2014</option>
        <option value="session4cert">Waterloo, IA Oct 27-31, 2014</option>
        <option value="session5cert">Grand Island, NE Nov 17-21, 2014</option>
    </select>
</label>
<!--end label for certification-->
<label for="recertification">
    <input type="radio" name="ClassLevel" value="recertification" id="select-recertification" class="select-recertification">Recertification

    <select class="copy hidden" name="recert" id="recert1">
        <option value="">Select a Recertification Session</option>
        <option value="session1recert">Fort Dodge, IA May 8, 2014</option>
        <option value="session2recert">North Platte, NE Sept 25, 2014</option>
        <option value="session3recert">Omaha, NE Oct 16, 2014</option>
        <option value="session4recert">Waterloo, IA Oct 30, 2014</option>
        <option value="session5recert">Grand Island, NE Nov 20, 2014</option>
    </select>
</label>

因此，单选按钮的值为＆＃34;认证＆＃34;需要使用名称＆＃34; cert＆＃34;进行选择。出现，并选择＆＃34;重新认证＆＃34;应该选择＆＃34; recert＆＃34;出现。因为我在页面上多次重复此用户注册块，并且因为每个都需要以相同的方式运行，所以我选择使用类并输入[＆＃34; name：＆＃34;]作为我的jQuery中的选择器，如下所示：

$(document).ready(function () {
    $(".addReg").click(function (e) {
        $(".tbr_fieldset:hidden").slice($(".tbr_fieldset:hidden").siblings(":first").index(), 1).slideDown();
        e.preventDefault();
    });
});

$(document).ready(function () {
    $("input[name='ClassLevel']").change(function (e) {
        $(this).next(":first").toggle();
        e.preventDefault();
    });
});

这几乎有效。如果您在此http://jsfiddle.net/shark_goatshark/Aktwu/1/中查看，您可以看到我的＆＃34;注册人＆＃34;单击+按钮时，框会相乘，而单选按钮确实显示正确/对应的下拉列表。问题是，一旦点击它们就不会重新隐藏。如果我点击＆＃34;认证，＆＃34;并显示下拉列表，然后改变主意并点击“重新认证”，＆＃34;重新认证下拉列表出现，但认证证书不会消失。

我知道必须有一个更优雅的解决方案，但我感到茫然。高级感谢任何和所有输入！

Answer 1

而不是切换使用slideToggle，你只需要在顶部一次使用document.ready，所有代码都在该文档就绪函数的最后一个括号之间

Answer 2

在我们开始之前：

$(this).next(":first")

这里的第一个选择器是多余的。因为$（this）只会返回一个jquery元素，并且：首先返回集合的第一个jquery元素，这不是必需的。所以我们拥有的是：

$("input[name='ClassLevel']").change(function (e) {
    $(this).next().toggle();
    e.preventDefault();
});

如果从被选中更改为未选中的更改会触发更改事件，那么这将正常工作。不幸的是情况并非如此。只有被选中才会触发更改事件（您几乎可以将其视为输入上的单击事件）。

知道这一点，这意味着我们需要重置之前任何更改事件的更改，即显示下拉列表。实现此目的的一种方法是在显示当前下拉列表之前隐藏所有下拉列表。所以我们有：

$("input[name='ClassLevel']").change(function (e) {
    $("input[name='ClassLevel']").next().hide();
    $(this).next().toggle();
    e.preventDefault();
});

Answer 3

Javascript：

$(document).ready(function() {
    $(".hidden").hide();
    $("input[type=radio][name=ClassLevel]").change(function() {
        var parent_id = $(this).closest("fieldset").attr("id");
        var child = $(this).val();

        $("#"+parent_id+" .hidden:visible").toggle();
        $("#"+parent_id+" ."+child).toggle();
    });
});

我使用的html（删除了每个select的id并添加了另一个与单选按钮值相同的类（即对于Certification广播，与之关联的select的类将是认证（隐藏后添加））< / p>

另外，我看到你将在同一页面上有多对，所以我已经使用了fieldset的id（每个fieldset必须有一个唯一的id才能使它正常工作）

<fieldset id="tbr__15">
<legend>Registrant Information</legend>
<!--<button id="addReg" class="addReg" value="2">+</button>-->
<div id="fieldcontwrapper">
    <!-- Wrapper for Group -->
    <div id="fieldcont">
        <!-- Group your field -->
        <div class="required">
            <label for="name" class="label_heading">Registrant Name (first and last)</label>
            <input type="text" id="name_1" value="name_1">
            <br>
            <p class="label_heading">Training Level:</p>
            <label for="certification">
                <input type="radio" name="ClassLevel" value="certification" id="select-certification" class="select-certification">Certification
                <!-- <label id="cert-available-classes" class="hidden" for="cert">Certification Classes Available</label>    -->
                <select class="copy hidden certification" name="cert">
                    <option value="">Select a Certification Session</option>
                    <option value="session1cert">Fort Dodge, IA May 5-9, 2014</option>
                    <option value="session2cert">North Platte, NE Sept 22-26, 2014</option>
                    <option value="session3cert">Omaha, NE Oct 13-17, 2014</option>
                    <option value="session4cert">Waterloo, IA Oct 27-31, 2014</option>
                    <option value="session5cert">Grand Island, NE Nov 17-21, 2014</option>
                </select>
            </label>
            <!--end label for certification-->
            <label for="recertification">
                <input type="radio" name="ClassLevel" value="recertification" id="select-recertification" class="select-recertification">Recertification
                <!-- <label id="recert-available-classes" class="hidden" for="recert">Recertification Classes Available</label>-->
                <select class="copy hidden recertification" name="recert">
                    <option value="">Select a Recertification Session</option>
                    <option value="session1recert">Fort Dodge, IA May 8, 2014</option>
                    <option value="session2recert">North Platte, NE Sept 25, 2014</option>
                    <option value="session3recert">Omaha, NE Oct 16, 2014</option>
                    <option value="session4recert">Waterloo, IA Oct 30, 2014</option>
                    <option value="session5recert">Grand Island, NE Nov 20, 2014</option>
                </select>
            </label>
            <!--end label for recertification-->
        </div>
    </div>
    <!-- #fieldcont -->
</div>
<!-- #fieldcontwrapper -->
<button id="addReg" class="addReg">+</button>
</fieldset>
<!--fieldset#tbr__16-->
<fieldset id="tbr__16" class="tbr_fieldset">
<legend>Registrant Information</legend>
<!--<button id="addReg" class="addReg" value="2">+</button>-->
<div id="fieldcontwrapper">
    <!-- Wrapper for Group -->
    <div id="fieldcont">
        <!-- Group your field -->
        <div class="required">
            <label for="name" class="label_heading">Registrant Name (first and last)</label>
            <input type="text" id="name_1" value="name_1">
            <br>
            <p class="label_heading">Training Level:</p>
            <label for="certification">
                <input type="radio" name="ClassLevel" value="certification" id="select-certification" class="select-certification">Certification
                <!-- <label id="cert-available-classes" class="hidden" for="cert">Certification Classes Available</label>    -->
                <select class="copy hidden certification" name="cert">
                    <option value="">Select a Certification Session</option>
                    <option value="session1cert">Fort Dodge, IA May 5-9, 2014</option>
                    <option value="session2cert">North Platte, NE Sept 22-26, 2014</option>
                    <option value="session3cert">Omaha, NE Oct 13-17, 2014</option>
                    <option value="session4cert">Waterloo, IA Oct 27-31, 2014</option>
                    <option value="session5cert">Grand Island, NE Nov 17-21, 2014</option>
                </select>
            </label>
            <!--end label for certification-->
            <label for="recertification">
                <input type="radio" name="ClassLevel" value="recertification" id="select-recertification" class="select-recertification">Recertification
                <!-- <label id="recert-available-classes" class="hidden" for="recert">Recertification Classes Available</label>-->
                <select class="copy hidden recertification" name="recert">
                    <option value="">Select a Recertification Session</option>
                    <option value="session1recert">Fort Dodge, IA May 8, 2014</option>
                    <option value="session2recert">North Platte, NE Sept 25, 2014</option>
                    <option value="session3recert">Omaha, NE Oct 16, 2014</option>
                    <option value="session4recert">Waterloo, IA Oct 30, 2014</option>
                    <option value="session5recert">Grand Island, NE Nov 20, 2014</option>
                </select>
            </label>
            <!--end label for recertification-->
        </div>
    </div>
    <!-- #fieldcont -->
</div>
<!-- #Copperfield -->
<button id="addReg" class="addReg">+</button>