DOM方法创建<select>和<option>不成功，求教育，谢谢！！！

<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<head><title></title>
<script language="javascript">
<!--
window.onload=m;
function m()
{ var e=document.getElementById("e1");
var s=createElement("select");
var o=createElement("option");
s.lastChild(o);
var t=createTextNode("jjjjjjjjj");
o.appendChild(t);
o.setAttribute("value","30");
}
//-->
</script>
</head>
<body>
<div id="e1"></div>
</body>
</html>

解决方案 »

  1.   

    <!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>
    </head><body>
    <div id="e1"></div>
    <script language="javascript">
    <!--
    window.onload=m;
    function m()
    { 
    var dom_select = document.createElement('select');
    dom_select.name = 's1';
    dom_select.id = 's2';
    var s1_option = document.createElement('option');
    dom_select.appendChild(s1_option);
    var s1_option_text = document.createTextNode('node');
    s1_option.appendChild(s1_option_text); 
    document.getElementById('e1').appendChild(dom_select);
    }
    //-->
    </script>
    </body>
    </html>
      

  2.   

    var selectCmp = document.createElement("select"); 
    var opt = document.createElement("option");  
    var _text = document.createTextNode("我是text");  //创建文本  
    opt.appendChild(_text);     //把文本赋给标签    
    opt.setAttribute("value",'aaa');  //给option赋value值    
    opt.setAttribute("selected","selected");   
    //添加  
    selectCmp.appendChild(opt);  
    document.body.appendChild(selectCmp);
      

  3.   

    你好，谢谢你的回答，我试了能运行，但我还是有几个疑问？
    第一，s1_option 的value属性至少得设上吧，于是我加了一句
       s1_option.setAttribute("value","30); 
    第二，在《javascript DOM编程艺术》中说要像使用CSS一样用DOM，所以我为了把HTML和它分离开
    就把脚本内容移到<head>里去了；
    以上两步做完，就又不显示了，唉，我到底错在哪呢？
      

  4.   

    <!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>
        <script language="javascript">
    <!--
    window.onload=m;
    function m()
    { 
        var dom_select = document.createElement('select');
        dom_select.name = 's1';
        dom_select.id = 's2';
        var s1_option = document.createElement('option');
        dom_select.appendChild(s1_option);
        var s1_option_text = document.createTextNode('node');
        s1_option.appendChild(s1_option_text);
        s1_option.setAttribute("value","30);     document.getElementById('e1').appendChild(dom_select);
    }
    //-->
    </script></head><body>
        <div id="e1"></div></body>
    </html>
      

  5.   

    s1_option.setAttribute("value","30");  你刚才30后面少加了一个引号，你加上试试
      

  6.   

    <!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>
      <script language="javascript">
    <!--
    window.onload=m;
    function m()
    {  
      var dom_select = document.createElement('select');
      dom_select.name = 's1';
      dom_select.id = 's2';
      var s1_option = document.createElement('option');
      dom_select.appendChild(s1_option);
      var s1_option_text = document.createTextNode('node');
      s1_option.appendChild(s1_option_text);
      s1_option.setAttribute("value","30");    document.getElementById('e1').appendChild(dom_select);
    }
    //-->
    </script></head><body>
      <div id="e1"></div></body>
    </html>
      

  7.   

    直接加在body下面？我试了一下你的方法，实验证明无效。附代码：
    <!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>
        <script language="javascript">
    <!--
    var selectCmp = document.createElement("select"); 
    var opt = document.createElement("option");  
    var _text = document.createTextNode("我是text");  //创建文本  
    opt.appendChild(_text);     //把文本赋给标签    
    opt.setAttribute("value",'aaa');  //给option赋value值    
    opt.setAttribute("selected","selected");   
    //添加  
    selectCmp.appendChild(opt);  
    document.body.appendChild(selectCmp);
    //-->
    </script></head><body>
        <div id="e1"></div></body>
    </html>
      

  8.   

    感谢，加上这个引号，果然好了我想多问一句，我把它改成for循环后怎么不行呢，我知道同样也是错在这句上，因为把这句去掉后就能正常运行，不过option必须得加value呀，不然不成了废物
    下面是修改后的代码
    <!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>
        <script language="javascript">
    <!--
    window.onload=m;
    function m()
    { 
        var dom_select = document.createElement('select');
        dom_select.name = 's1';
        dom_select.id = 's2';
    for(var i=1;i<100;i++)
    {
    s1_o=document.createElement('option');
    dom_select.appendChild(s1_o);
    s1_o_t=document.createTextNode(i);
    s1_o_t.setAttribute("value",i); //这句有毛病，但不知错在哪
    s1_o.appendChild(s1_o_t); }
        document.getElementById('e1').appendChild(dom_select);
    }
    //-->
    </script></head><body>
        <div id="e1"></div></body>
    </html>
      

  9.   

    毛病找到了，s1_o_t.setAttribute("value",i);改成s1_o.setAttribute("value",i);就好了，谢谢！
      

  10.   

    <!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>
      <script language="javascript">
    <!--
    window.onload=m;
    function m()
    {  
      var dom_select = document.createElement('select');
      dom_select.name = 's1';
      dom_select.id = 's2';
    for(var i=1;i<100;i++)
    {
    s1_o=document.createElement('option');
    dom_select.appendChild(s1_o);
    s1_o_t=document.createTextNode(i);s1_o.setAttribute("value",i); //这句有毛病，但不知错在哪
    s1_o.appendChild(s1_o_t);}
      document.getElementById('e1').appendChild(dom_select);
    }
    //-->
    </script></head><body>
      <div id="e1"></div></body>
    </html>变量写错了，应该加在s1_o上