答案 0 :(得分:1)
普通的javascript并不是我的强项,因此它可能不是很漂亮,但是可以正常工作。
var select = document.getElementById("Reden")
var enabler = document.getElementsByName("enable")
var allOptions = select.getElementsByTagName("option");
// Add a listener for the radio changes
for (var i = 0, len = enabler.length; i < len; i++) {
enabler[i].addEventListener('click', optionToggle);
}
// Disables all options and reenables those that match the value of the radio
function optionToggle() {
filterOptions = select.getElementsByClassName(this.value)
select.value = ""
setDisabled(allOptions, true)
setDisabled(filterOptions, false)
}
function setDisabled(targetList, value) {
for (var i = 0; i < targetList.length; i++) {
targetList[i].disabled = value;
}
}
<input type="radio" value="1" name="enable">1 <br>
<input type="radio" value="2" name="enable">2 <br>
<select id="Reden">
<option class=1 value="1" disabled="">1</option>
<option class=1 value="2" disabled="">2</option>
<option class=1 value="3" disabled="">3</option>
<option class=2 value="4" disabled="">4</option>
<option class=2 value="5" disabled="">5</option>
<option class=2 value="6" disabled="">6</option>
</select>
答案 1 :(得分:0)
如果要使用代码,请添加 这两行
document.getElementsByClassName("one")[0].selected="selected";
和
document.getElementsByClassName("two")[0].selected="selected";
在这种情况下,用户单击一个单选按钮时将获得默认值1或4。 下面有一个例子
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript">
function myFunction1() {
document.getElementsByClassName("one")[0].disabled = false;
document.getElementsByClassName("one")[0].selected="selected";
document.getElementsByClassName("one")[1].disabled = false;
document.getElementsByClassName("one")[2].disabled = false;
document.getElementsByClassName("two")[0].disabled = true;
document.getElementsByClassName("two")[1].disabled = true;
document.getElementsByClassName("two")[2].disabled = true;
}
</script>
<script type="text/javascript">
function myFunction2() {
document.getElementsByClassName("one")[0].disabled = true;
document.getElementsByClassName("one")[1].disabled = true;
document.getElementsByClassName("one")[2].disabled = true;
document.getElementsByClassName("two")[0].disabled = false;
document.getElementsByClassName("two")[0].selected="selected";
document.getElementsByClassName("two")[1].disabled = false;
document.getElementsByClassName("two")[2].disabled = false;
}
</script>
</head>
<body>
<input type="radio" onchange="myFunction1()" name="enable" >1 <br>
<input type="radio" onchange="myFunction2()" name="enable">2 <br>
<select name="Reden">
<option class="one" value="1" disabled >1</option>
<option class="one" value="2" disabled >2</option>
<option class="one" value="3" disabled >3</option>
<option class="two" value="4" disabled>4</option>
<option class="two" value="5" disabled>5</option>
<option class="two" value="6" disabled>6</option>
</body>
</html>