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

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

如果用户选择收音机按钮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>

无线电1
清单1-1
清单1-2
无线电2
清单2-1
清单2-2
函数select1（）{
document.getElementById（“select1”）.style.display=“block”；
document.getElementById（“select2”）.style.display=“无”；
}
函数select2（）{
document.getElementById（“select2”）.style.display=“block”；
document.getElementById（“select1”）.style.display=“无”；
}    
document.getElementById（“rdo1”）.onclick=select1；
document.getElementById（“rdo2”）.onclick=select2；

---

在JSFIDLE上：

这里我将代码放在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();
    });
});

$（函数（）{
$（“[name=rdo]”。单击（函数（）{
$（“.dummyclass”）.hide（）；//确保两个div具有相同的类名
$（“#”+$（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>

第一个下拉列表

第二个下拉列表

1.
2.
3.
1.
2.
3.

请注意，radio的值与下拉列表的名称相同，因此您可以在jquery上轻松地管理它

下面是js代码：

<script type="text/javascript">
$(".radioSelect").click(function() {
    $(".dropDown").hide();
    $("[name='"+$(this).val()+"'").show();
    return false;
});
</script>

$（“.radioSelect”）。单击（函数（）{
$（“.dropDown”）.hide（）；
$（“[name=”+$（this.val（）+”）.show（）；
返回false；
});

评论很好，您是否尝试过获取答案？非常感谢。document.getElementById（“select2”）.style.display=“none”；我没有放置style.display=“none”，所以所有列表都显示：）。非常感谢您。即使它成功了。实际上我尝试过类似于函数func（obj）{if（obj.value==“r1”）的东西{var bnd=document.getElementById（“sel1”）bnd.options[1]。selected=1；var bnd1=document.getElementById（“sel2”）bnd1.options[2]。selected=1；}如果（obj.value==“r2”）{var bnd=document.getElementById（“sel1”）bnd.options[0]。selected=1；var bnd1=document.getElementById（“sel2”）bnd1.options[1]。selected=1；}