jquery读单选框问题
界面上有radio表单：A，B，C
选A的时候自动出现一个下拉列表，内容为A1，A2，A3；
选B同样如此，内容为B1，B2，B3
选C也是如此，C1，C2，C3。
用jquery可以实现吗？求例子，谢谢
[解决办法]
<body onload="func()">
<form name="frm">
<input type="radio" checked id="AA" name="radio" value="A" onclick="fun()"/>A
<input type="radio" id="BB" name="radio" value="B" onclick="fun()"/>B
<input type="radio" id="CC" name="radio" value="C" onclick="fun()"/>C
</form>
<div id="A">
A1，A2，A3
</div>
<div id="B">
B1，B2，B3
</div>
<div id="C">
C1，C2，C3。
</div>
</body>
function func(){
$("#B").hide();
$("#C").hide();
}
function fun(){
var temp = $("[name=radio]:input");
if(temp[0].checked){
$("#A").show();
$("#B").hide();
$("#C").hide();
}else if(temp[1].checked){
$("#A").hide();
$("#B").show();
$("#C").hide();
}else if(temp[2].checked){
$("#A").hide();
$("#B").hide();
$("#C").show();
}
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="demo.js" type="text/javascript"></script>
</head>
<body>
<input type="radio" id="a1">A</input>
<input type="radio" id="b1">B</input>
<input type="radio" id="c1">C</input>
<br>
<select id="one" style="display:none">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<select id="two" style="display:none">
<option>A_1</option>
<option>B_1</option>
<option>C_1</option>
</select>
<select id="three" style="display:none">
<option>A_2</option>
<option>B_2</option>
<option>C_2</option>
</select>
</body>
</html>
$(function(){
$("#a1").bind("click",function(){
$("#one").show();
$("#two").hide();
$("#three").hide();
})
$("#b1").bind("click",function(){
$("#one").hide();
$("#two").show();
$("#three").hide();
})
$("#c1").bind("click",function(){
$("#two").hide();
$("#one").hide();
$("#three").show();
})
})
<script language="javascript">
$(function(){
$(":radio").click(function(){
if(this.id=="AA"){
$("div").empty();
$("<select><option>A1</option><option>A2</option><option>A3</option></select>").appendTo("div");
}
if(this.id=="BB"){
$("div").empty();
$("<select><option>B1</option><option>B2</option><option>B3</option></select>").appendTo("div");
}
if(this.id=="CC"){
$("div").empty();
$("<select><option>C1</option><option>C2</option><option>C3</option></select>").appendTo("div");
}
});
}
)
</script>
</head>
<body>
<input type="radio" id="AA" name="radio" value="A" onclick="fun()"/>A
<input type="radio" id="BB" name="radio" value="B" onclick="fun()"/>B
<input type="radio" id="CC" name="radio" value="C" onclick="fun()"/>C
<div id="div1">
</div>
</body>
</html>
