##$$$看这个js操作dom问题

  一个下拉列表，点一个按钮，变成一组Radio 
用js写也可以，js框架实现也行 谢谢了

解决方案 »

  1.   

    js框架最好jquery 了 呵呵 麻烦了
      

  2.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
     </HEAD> <BODY>
       <select name='city' id='city'>
            <option value='Bath'>Bath</option>
            <option value='Cambridge'>Cambridge</option>
            <option value='Leeds'>Leeds</option>
            <option value="">其他</option>
        </select>
    <div id='app' style=" display:none;">
    <input type="radio" name="fruit" value = "Apple">苹果<br>
    <input type="radio" name="fruit" value = "Orange" checked>桔子<br>
    <input type="radio" name="fruit" value = "Mango">芒果<br>
    </div>
    <input type="button" value="test" onclick="change()"/>
     </BODY>
    </HTML>
    <script type="text/javascript">var change=function(){
        
            if(document.getElementById("city").style.display=="none"){
                document.getElementById('city').style.display="block";
    document.getElementById('app').style.display="none";
            }else {
                document.getElementById('city').style.display="none";
                document.getElementById('app').style.display="block";
            }
        
    }</script>
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>三行三列</title>
    <style>
    </style>
    <script src="jquery-1.3.2.js"></script>
    <script>
    $(function(){
    $("#button").click(function(){
     var temp_value = "";
     $("#city").children("option").each(function(){
       if($(this).is(":selected")){
       var value = $(this).val();
     temp_value = value;
     }
     });
     var temp_id = "#" + temp_value;
     $(temp_id).show().siblings().hide();;
    });
     
    });
    </script>
    </head>
    <body>
        <select name='city' id='city'>
            <option value='fruit'>fruit</option>
            <option value='Vegetables'>Vegetables</option>
            <option value='food'>food</option>
            <option value="">其他</option>
        </select>
        <div id="all">
            <div id='fruit' class="test" style="display:none;">
            <input type="radio" name="fruit" value = "Apple">苹果<br>
            <input type="radio" name="fruit" value = "Orange" checked>桔子<br>
            <input type="radio" name="fruit" value = "Mango">芒果<br>
            </div>
             <div id='Vegetables' class="test" style=" display:none;">
            <input type="radio" name="fruit" value = "Apple">白菜<br>
            <input type="radio" name="fruit" value = "Orange" checked>芹菜<br>
            <input type="radio" name="fruit" value = "Mango">韭菜<br>
            </div>
            <div id='food' class="test" style=" display:none;">
            <input type="radio" name="fruit" value = "Apple">面包<br>
            <input type="radio" name="fruit" value = "Orange" checked>米饭<br>
            <input type="radio" name="fruit" value = "Mango">肉<br>
            </div>
        </div>
        <input type="button" id="button" value="test" onclick="change()"/>
    </body>
    </html>
    是这个意思吗？
      

  4.   

    LZ的意思是把select的option变成radio吧？
    我看楼上几位的回答好像都不是这样啊？
    是我理解错了？
      

  5.   

    我觉得是这种转换 -.-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>new document</title>
    <script type="text/javascript">
    function $(id){
    return document.getElementById(id);
    }
    function convert(){
    var sel = $("sel"), html = [];
    if(!sel) {
    return;
    }
    var opt = sel.options;
    for(var i = 0; i < opt.length; i++){
    if(opt[i].selected){
    html.push("<label><input type='radio' name='rdo' value='" + opt[i].value + "' checked='checked'>" + opt[i].text + "</label>");
    }else{
    html.push("<label><input type='radio' name='rdo' value='" + opt[i].value + "'>" + opt[i].text + "</label>");
    }
    }
    $("container").innerHTML = html.join("");
    }
    </script>
    </head>
    <body>
    <div id="container">
    <select id="sel">
    <option value="1">ABC</option>
    <option value="2">123</option>
    <option value="3">678</option>
    </select>
    </div>
    <input type="button" value="转换" onclick="convert()" /></body>
    </html>
      

  6.   

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>select变radio</title>
    <script>
    function change(o){
    o.style.display = "none";
    var s = document.getElementById("s1");
    s.style.display = "none";//隐藏s
    //s.parentNode.removeChild(s);//删除s
    var d = document.getElementById("con");
    var options = s.options;
    for(var i=0;i<options.length;i++){
    var r = document.createElement("input");
    r.type = "radio";
    r.value = options[i].value;
    d.appendChild(r);
    var t = document.createTextNode(options[i].text);
    d.appendChild(t);
    }
    }
    </script>
    </head><body>
    <select id="s1" name="s1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    <input type=button value="变成radio" onclick="change(this)"/><div id="con"></div>
    </body></html>
      

  7.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
    <script type="text/javascript">function change(){
        var optObjs = document.getElementById("city").options;
    var buttonObj = document.getElementById("test");
    var selectObj =  document.getElementById("city");
        for(var i = 0;i<optObjs.length;i++){
    createRadioByOption(optObjs[i]);
    }
    selectObj.style.display = "none";
    buttonObj.style.display = "none";
    }function createRadioByOption(optObj){
    var radio = document.createElement("input");
    radio.type = "radio";
    radio.name = optObj.name;
    radio.value = optObj.value;
    var text = document.createTextNode(optObj.innerHTML);
    var br = document.createElement("br");
    document.body.appendChild(radio);
    document.body.appendChild(text);
    document.body.appendChild(br);
    }</script> </HEAD> <BODY>
       <select name='city' id='city'>
            <option value='Bath'>Bath</option>
            <option value='Cambridge'>Cambridge</option>
            <option value='Leeds'>Leeds</option>
            <option value="">其他</option>
        </select>
       
        <input id="test" type="button" value="test" onclick="change()"/>
     </BODY>
    </HTML>
      

  8.   


     <div id="seleField">
      <select id="sele">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
      </select>
      <INPUT TYPE="button" value="转换" onclick="trans()">
     </div>
     <div id="radField"></div>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var sele = document.getElementById("sele");
    var radfield = document.getElementById("radField");
    function trans(){
    for (var i=0; i<sele.options.length; i++)
    {
    var label = document.createElement("label");
    var rad = document.createElement("input");
    rad.type = "radio";
    rad.Name = "rad1";
    rad.value = sele.options[i].value;
    label.appendChild(rad);
    label.innerHTML += sele.options[i].text +"&nbsp;";
    radfield.appendChild(label);
    }
    document.getElementById("seleField").style.display = "none";
    }
    //-->
    </SCRIPT>