[英]Linking radio buttons to dropdown menu
我希望完成這個小項目而不使用任何if / else / while / for /無論控制流語句和簡單的javascript,但我似乎遇到了問題。 我只是想將單選按鈕連接到下拉菜單,這樣當單擊一個時,另一個突出顯示。 例如,現在我就是這樣,當你使用setRB()函數從下拉菜單中選擇一個項目時,它會設置相應的單選按鈕。
我現在想要單選按鈕將true設置為相應的下拉菜單項。 這可以通過上述條件完成,還是需要使用控制流語句(我相信這就是所謂的)。
謝謝。
function setRb() {
//Point to options list
//var e = document.getElementById('selColors');
var e = document.jon.resistors;
//Get value of color selected
var s = e.options[e.selectedIndex].value;
//Now get radio button obect and check it
var c = document.getElementById(s);
c.checked = true;
}
function setList(radio) {
alert(radio);
}
<form name=jon>
<select id="selColors" name="resistors">
<option value="rbBlack">Black</option>
<option value="rbBlue">Blue</option>
<option value="rbBrown">Brown</option>
<option value="rbGrey">Grey</option>
<option value="rbGreen">Green</option>
<option value="rbOrange">Orange</option>
<option value="rbRed">Red</option>
<option value="rbViolet">Violet</option>
<option value="rbYellow">Yellow</option>
<option value="rbWhite">White</option>
</select>
<input onclick="setRb()" type="button" value="Submit">
<div>
<table>
<tr>
<td><input onclick="setList(this.value)" id="rbBlack" value="Black" type="radio" name="colors" />Black</td>
<td><input onclick="setList(this.value)" id="rbBlue" value="Blue" type="radio" name="colors" />Blue</td>
<td><input onclick="setList(this.value)" id="rbBrown" value="Brown" type="radio" name="colors" />Brown</td>
<td><input onclick="setList(this.value)" id="rbGrey" value="Grey" type="radio" name="colors" />Grey</td>
<td><input onclick="setList(this.value)" id="rbGreen" value="Green" type="radio" name="colors" />Green</td>
<td><input onclick="setList(this.value)" id="rbOrange" value="Orange" type="radio" name="colors" />Orange</td>
<td><input onclick="setList(this.value)" id="rbRed" value="Red" type="radio" name="colors" />Red</td>
<td><input onclick="setList(this.value)" id="rbViolet" value="Violet" type="radio" name="colors" />Violet</td>
<td><input onclick="setList(this.value)" id="rbYellow" value="Yellow" type="radio" name="colors" />Yellow</td>
<td><input onclick="setList(this.value)" id="rbWhite"value="White" type="radio" name="colors" />White</td>
</tr>
</table>
</div>
對的,這是可能的。
具有所選選項值的訪問選項:
document.querySelector("option[value='x']")
function setRb() { //Point to options list //var e = document.getElementById('selColors'); var e = document.jon.resistors; //Get value of color selected var s = e.options[e.selectedIndex].value; //Now get radio button obect and check it var c = document.getElementById(s); c.checked = true; } // Set current option null var currOpt = null; function setList(e) { // Value is the id of the clicked radio button var val = e.id; // Access current option currOpt = document.querySelector("option[value=" + val + "]"); // Set current option "selected" currOpt.setAttribute("selected", ""); }
<form name=jon> <select id="selColors" name="resistors"> <option value="rbBlack">Black</option> <option value="rbBlue">Blue</option> <option value="rbBrown">Brown</option> <option value="rbGrey">Grey</option> <option value="rbGreen">Green</option> <option value="rbOrange">Orange</option> <option value="rbRed">Red</option> <option value="rbViolet">Violet</option> <option value="rbYellow">Yellow</option> <option value="rbWhite">White</option> </select> <input onclick="setRb()" type="button" value="Submit"> </form> <div> <table> <tr> <td> <input onclick="setList(this)" id="rbBlack" value="Black" type="radio" name="colors" />Black</td> <td> <input onclick="setList(this)" id="rbBlue" value="Blue" type="radio" name="colors" />Blue</td> <td> <input onclick="setList(this)" id="rbBrown" value="Brown" type="radio" name="colors" />Brown</td> <td> <input onclick="setList(this)" id="rbGrey" value="Grey" type="radio" name="colors" />Grey</td> <td> <input onclick="setList(this)" id="rbGreen" value="Green" type="radio" name="colors" />Green</td> <td> <input onclick="setList(this)" id="rbOrange" value="Orange" type="radio" name="colors" />Orange</td> <td> <input onclick="setList(this)" id="rbRed" value="Red" type="radio" name="colors" />Red</td> <td> <input onclick="setList(this)" id="rbViolet" value="Violet" type="radio" name="colors" />Violet</td> <td> <input onclick="setList(this)" id="rbYellow" value="Yellow" type="radio" name="colors" />Yellow</td> <td> <input onclick="setList(this)" id="rbWhite" value="White" type="radio" name="colors" />White</td> </tr> </table> </div>
要連接您的選擇到單選按鈕 - 反之亦然 ,您可以這樣做:
const EL = sel => document.querySelectorAll(sel); const connect = ev => { [...EL(`[value="${ev.target.value}"]`)].forEach(el => el.type === "radio" ? el.checked = true : el.selected = true ) }; // Connect select to radio buttons and vice-versa [...EL('[name=resistors], [name=colors]')].forEach(el => el.addEventListener('change', connect));
<select name="resistors"> <option value="Black">Black</option> <option value="Blue">Blue</option> <option value="Brown">Brown</option> <option value="Grey">Grey</option> <option value="Green">Green</option> <option value="Orange">Orange</option> <option value="Red">Red</option> <option value="Violet">Violet</option> <option value="Yellow">Yellow</option> <option value="White">White</option> </select> <br> <label><input type="radio" name="colors" value="Black">Black</label> <label><input type="radio" name="colors" value="Blue">Blue</label> <label><input type="radio" name="colors" value="Brown">Brown</label> <label><input type="radio" name="colors" value="Grey">Grey</label> <label><input type="radio" name="colors" value="Green">Green</label> <label><input type="radio" name="colors" value="Orange">Orange</label> <label><input type="radio" name="colors" value="Red">Red</label> <label><input type="radio" name="colors" value="Violet">Violet</label> <label><input type="radio" name="colors" value="Yellow">Yellow</label> <label><input type="radio" name="colors" value="White">White</label>
以上使用ES6語法, Sun在這個jsFiddle鏈接中提供了一個ES5版本
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.