我有两个下拉列表，list1和list2。我希望它根据用户选择的单选按钮进行更改。
如果用户选择单选按钮1，则应显示列表1。如果用户选择单选按钮2，则应显示列表2。
如何使用javascript实现这一点。请有人帮帮我。
这里是我的示例，您应该将其修改为您的示例：
<div>
<input type="radio" name="rdo" id="rdo1" value="list1" />Radio1
<select id="select1" style='display:none;'>
<option value="l1">list1-1</option>
<option value="l2">list1-2</option>
</select>
</div>
<div>
<input type="radio" name="rdo" id="rdo2" checked="checked" value="list2"/>Radio2
<select id="select2">
<option value="l1">list2-1</option>
<option value="l2">list2-2</option>
</select>
</div>
<script>
function select1() {
document.getElementById("select1").style.display="block";
document.getElementById("select2").style.display="none";
}
function select2() {
document.getElementById("select2").style.display="block";
document.getElementById("select1").style.display="none";
}
document.getElementById("rdo1").onclick = select1;
document.getElementById("rdo2").onclick = select2;
</script>
在jsfiddle上：http://jsfiddle.net/u8Tvq/
这里我用jQuery放代码，你也可以用核心javascript来做这件事。我的编码是基于这样一种假设，即你对两个单选按钮都有相同的名称，并且你已经把你的列表框放在了div中
<input type="radio" name="rdo" value="val1" />
<input type="radio" name="rdo" value="val2" />
<div id="val1_list" class="dummyclass">
<select ></select>
</div>
<div id="val2_list" class="dummyclass">
<select ></select>
</div>
$(function() {
$("[name=rdo]").click(function (){
$(".dummyclass").hide();// make sure both the div have same class name
$("#"+ $(this).val()+"_list").show();
});
});
首先创建一个隐藏下拉列表的CSS代码。如果单击相应的收音机，我们将显示下拉菜单。
<style>
.dropDown { display:none; }
</style>
然后创建收音机和下拉菜单。
<input type="radio" value="drop1" class="radioSelect"> First Drop Down<br>
<input type="radio" value="drop2" class="radioSelect"> Sencond Drop Down<br>
<select name="drop1" class="dropDown">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="drop2" class="dropDown">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
请注意，单选的值与下拉列表的名称相同，因此您可以在jquery 上轻松管理它
现在这将是js代码：
<script type="text/javascript">
$(".radioSelect").click(function() {
$(".dropDown").hide();
$("[name='"+$(this).val()+"'").show();
return false;
});
</script>