jquery读单选框有关问题_Java Web开发

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();
		}
		
	}

------解决方案--------------------
用ajax好
------解决方案--------------------
给简洁的
function changeValue(){
$("select_A1").html("<option>A1</option><option>A2</option><option>A3</option>");
}

--------------
<select id="select_A1">
</select>
<select id="select_B1">
</select>
<select id="select_C1">
</select>
------解决方案--------------------
这个查查资料。直接的方法。
------解决方案--------------------

<!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();
	})

})

------解决方案--------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1<---strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="cache-control" content="max-age=5"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>