如何根据单选按钮更改选择列表框选择

Question

我有两个下拉列表，列表1，列表2.我希望它根据用户选择的单选按钮进行更改。

如果用户选择单选按钮1，应显示lists1。 如果用户选择单选按钮2，则应显示列表2。

我怎样才能实现这个使用JavaScript。 请有人帮助我。

Answer 1

这里我的示例，您应该修改它作为你的：

<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/

Answer 2

这里我把代码使用jQuery，您可以用JavaScript核心也做到这一点。我是基于假设你有两个单选按钮同名的编码，并且你已经把你的列表框放在div中。请确保两个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(); 
    }); 
}); 

Answer 3

首先创建一个将隐藏下拉菜单的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>