我希望在不使用任何 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>
关于javascript - 将单选按钮链接到下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51049736/