节目 <select><options>基于单选按钮单击

Question

拳头，让我说，我最近才开始使用js / jquery（例如2周前）我一直在努力地努力，以使以下所有技巧都可以很好地发挥作用-任何帮助都是不胜感激。

我有一个表格，用户可以在其中注册一个班的多个人； 在每个注册人“块”的内部，都有两个单选按钮。 选择一个应显示一组类选项，选择另一个应显示第二组选项：

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>

因此，具有“ certification”值的单选按钮需要显示名称为“ cert”的选择，而选择“ recertification”应显示选择“ recert”。 因为我要在页面上多次重复此用户注册块，并且由于每种行为都需要以相同的方式运行，所以我选择在jQuery中使用类和input [“ name：”]作为选择器，如下所示：

$(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/中进行查看，则可以看到，单击+按钮时，我的“注册人”框成倍增加，单选按钮的确显示正确/相应的下拉菜单。 问题是，一旦单击，它们就不会重新隐藏。 如果我单击“证书”，并显示其下拉菜单，然后改变主意，然后单击“重新认证”，则将显示重新认证下拉菜单，但证书不会消失。

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

Answer 1

无需使用slideToggle进行切换，而是只需要document.ready一次就可以了，所有代码都在该代码和该文档准备功能的最后一个括号之间

Answer 2

在开始之前：

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

：first选择器在这里是多余的。 因为$（this）只会返回一个jquery元素，而：first返回集合中的第一个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（删除了每个选择的ID，并添加了与单选按钮相同的另一个类（即，对于“证书”广播，与之关联的选择的类将是证书（隐藏后添加））

另外，我看到您将在同一页面上具有多个对，因此我使用了字段集的ID（每个字段集必须具有唯一的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>