如何在下拉自定義列表單選按鈕中添加兩個以上的選項？

Question

This is my code, its basically a form having two radio buttons, which when chosen display a different list of options in the drop down.

 var theForm = document.getElementById('theForm'); var rad = theForm.radios; for (var i = 0; i < rad.length; i++) { rad[i].addEventListener('change', function() { theForm.classList.toggle('one'); theForm.classList.toggle('two'); }); }

 .conditional1, .conditional2 { display: none; }.one.conditional1 { display: block; }.two.conditional2 { display: block; } fieldset { margin: 1rem; }

 <form id="theForm" class="one"> <fieldset id="outer"> <legend>Choices</legend> <div class="radio-wrap"> <label for="one">One</label> <input type="radio" id="one" name="radios" value="one" checked> </div> <fieldset class="conditional1"> <legend>If One is set</legend> <div class="radio-wrap"> <input type="radio" id="aye1" name="condition1" value="aye" checked> <label for="aye1">Aye</label> </div> <div class="radio-wrap"> <input type="radio" id="nay1" name="condition1" value="nay"> <label for="nay1">Nay</label> </div> </fieldset> <div class="radio-wrap"> <label for="two">Two</label> <input type="radio" id="two" name="radios" value="two"> </div> <fieldset class="conditional2"> <legend>If Two is set</legend> <div class="radio-wrap"> <input type="radio" id="aye2" name="condition2" value="aye" checked> <label for="aye2">Aye</label> </div> <div class="radio-wrap"> <input type="radio" id="nay2" name="condition2" value="nay"> <label for="nay2">Nay</label> </div> </fieldset> </fieldset> </form>

當您有兩個選項時效果很好，但是當您添加第三個單選按鈕時它開始出現故障。

這是我嘗試添加更多單選按鈕的代碼：

 var theForm = document.getElementById('theForm'); var rad = theForm.radios; for (var i = 0; i < rad.length; i++) { rad[i].addEventListener('change', function() { theForm.classList.toggle('one'); theForm.classList.toggle('two'); }); }

 .conditional1, .conditional2, .conditional3, .conditional4 { display: none; }.one.conditional1 { display: block; }.two.conditional2 { display: block; }.three.conditional3 { display: block; }.four.conditional4 { display: block; } fieldset { margin: 1rem; }

 <form id="theForm" class="one"> <fieldset id="outer"> <legend>Please Select File</legend> <div class="radio-wrap"> <label for="one">GST</label> <input type="radio" id="one" name="radios" value="one"> </div> <fieldset class="conditional1"> <legend>GST</legend> <div class="radio-wrap"> <input type="radio" id="aye1" name="condition1" value="aye"> <label for="aye1">Aye1</label> </div> <div class="radio-wrap"> <input type="radio" id="nay1" name="condition1" value="nay"> <label for="nay1">Nay1</label> </div> </fieldset> <div class="radio-wrap"> <label for="two">Two</label> <input type="radio" id="two" name="radios" value="two"> </div> <fieldset class="conditional2"> <legend>If Two is set</legend> <div class="radio-wrap"> <input type="radio" id="aye2" name="condition2" value="aye"> <label for="aye2">Aye2</label> </div> <div class="radio-wrap"> <input type="radio" id="nay2" name="condition2" value="nay"> <label for="nay2">Nay2</label> </div> </fieldset> <div class="radio-wrap"> <label for="three">Three</label> <input type="radio" id="three" name="radios" value="three"> </div> <fieldset class="conditional3"> <legend>If Three is set</legend> <div class="radio-wrap"> <input type="radio" id="aye3" name="condition3" value="aye"> <label for="aye3">Aye3</label> </div> <div class="radio-wrap"> <input type="radio" id="nay3" name="condition3" value="nay"> <label for="nay3">Nay3</label> </div> </fieldset> <div class="radio-wrap"> <label for="four">Four</label> <input type="radio" id="three" name="radios" value="four"> </div> <fieldset class="conditional4"> <legend>If Four is set</legend> <div class="radio-wrap"> <input type="radio" id="aye4" name="condition4" value="aye4"> <label for="aye4">Aye4</label> </div> <div class="radio-wrap"> <input type="radio" id="nay4" name="condition4" value="nay4"> <label for="nay3">Nay3</label> </div> </fieldset> </fieldset> </form>

我是一個初學者，所以任何幫助表示贊賞。

Answer 1

問題在於您更改表單上的類的方式。

您正在使用具有二進制操作的theForm.classList.toggle() - 如果 class 不存在則添加它，如果存在則將其刪除。 當您只有 2 個選項時，這很好——要么是“一個”，要么是“兩個”。

這不適用於兩個以上的類，因此您可以這樣做：

1. 清除表格上已有的class
2. 檢查單擊了哪個單選按鈕
3. 從該單選按鈕獲取 id
4. 將相應的 class 添加到表單中 - 您的類與單選按鈕的名稱相匹配（例如，當您單擊 ID 為“one”的單選按鈕時，要添加到表單中的 class 名稱也是“one”） - 這意味着您可以只需使用 id 作為 class 名稱

你可以在你的 for 循環中這樣做：

for (var i = 0; i < rad.length; i++) {
    rad[i].addEventListener('change', function() {
        theForm.className = "";    /* remove existing class from the form */
        /* "this" is the clicked radio button, so add it's id as the class */ 
        theForm.classList.add(this.id);    
    });
}

工作示例：

 var theForm = document.getElementById('theForm'); var rad = theForm.radios; for (var i = 0; i < rad.length; i++) { rad[i].addEventListener('change', function() { theForm.className = ""; /* remove existing class from the form */ /* "this" is the clicked radio button, so add it's id as the class */ theForm.classList.add(this.id); }); }

 .conditional1, .conditional2, .conditional3, .conditional4 { display: none; }.one.conditional1 { display: block; }.two.conditional2 { display: block; }.three.conditional3 { display: block; }.four.conditional4 { display: block; } fieldset { margin: 1rem; }

 <form id="theForm" class=""> <fieldset id="outer"> <legend>Please Select File</legend> <div class="radio-wrap"> <label for="one">GST</label> <input type="radio" id="one" name="radios" value="one"> </div> <fieldset class="conditional1"> <legend>GST</legend> <div class="radio-wrap"> <input type="radio" id="aye1" name="condition1" value="aye"> <label for="aye1">Aye1</label> </div> <div class="radio-wrap"> <input type="radio" id="nay1" name="condition1" value="nay"> <label for="nay1">Nay1</label> </div> </fieldset> <div class="radio-wrap"> <label for="two">Two</label> <input type="radio" id="two" name="radios" value="two"> </div> <fieldset class="conditional2"> <legend>If Two is set</legend> <div class="radio-wrap"> <input type="radio" id="aye2" name="condition2" value="aye"> <label for="aye2">Aye2</label> </div> <div class="radio-wrap"> <input type="radio" id="nay2" name="condition2" value="nay"> <label for="nay2">Nay2</label> </div> </fieldset> <div class="radio-wrap"> <label for="three">Three</label> <input type="radio" id="three" name="radios" value="three"> </div> <fieldset class="conditional3"> <legend>If Three is set</legend> <div class="radio-wrap"> <input type="radio" id="aye3" name="condition3" value="aye"> <label for="aye3">Aye3</label> </div> <div class="radio-wrap"> <input type="radio" id="nay3" name="condition3" value="nay"> <label for="nay3">Nay3</label> </div> </fieldset> <div class="radio-wrap"> <label for="four">Four</label> <input type="radio" id="four" name="radios" value="four"> </div> <fieldset class="conditional4"> <legend>If Four is set</legend> <div class="radio-wrap"> <input type="radio" id="aye4" name="condition4" value="aye4"> <label for="aye4">Aye4</label> </div> <div class="radio-wrap"> <input type="radio" id="nay4" name="condition4" value="nay4"> <label for="nay3">Nay3</label> </div> </fieldset> </fieldset> </form>