Question

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

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

我如何使用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>

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

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

3 个答案: