節目 <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>