jquery读单选框问题

挺简单的吧，给单选按钮一个onclick事件，判断他的checked，如果是选中状态，则显示这个下拉框，估计你这个下拉框的数据是根据选中的radio的值来获取的，可以通过ajax来获得数据，然后往select中append就可以了，如果点击的时候状态是没选中，就清空select并且隐藏

解决方案 »

  1.   


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

    }
      

  2.   

    给简洁的
    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>
      

  3.   

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

  4.   


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