• 动态创建selectjs 操作select和option

     

    1.动态创建select

    [javascript] view plain copy
     
    1. function createSelect(){  
    2.           var mySelect = document.createElement("select");  
    3.           mySelect.id = "mySelect";   
    4.           document.body.appendChild(mySelect);  
    5.       }  

    2.添加选项option

    [javascript] view plain copy
     
    1. function addOption(){  
    2.   
    3.          //根据id查找对象，  
    4.           var obj=document.getElementById('mySelect');  
    5.   
    6.           //添加一个选项  
    7.           obj.add(new Option("文本","值"));    //这个只能在IE中有效  
    8.           obj.options.add(new Option("text","value")); //这个兼容IE与firefox  
    9.     }  

    3.删除所有选项option   

    [javascript] view plain copy
     
    1. function removeAll(){  
    2.          var obj=document.getElementById('mySelect');  
    3.          obj.options.length=0;  
    4.   
    5.    }  

    4.删除一个选项option

    [javascript] view plain copy
     
    1. function removeOne(){  
    2.            var obj=document.getElementById('mySelect');  
    3.   
    4.            //index,要删除选项的序号，这里取当前选中选项的序号  
    5.            var index=obj.selectedIndex;  
    6.            obj.options.remove(index);  
    7.      }  

    5.获得选项option的值

    [javascript] view plain copy
     
    1. var obj=document.getElementById('mySelect');  
    2.   
    3. var index=obj.selectedIndex; //序号，取当前选中选项的序号  
    4.   
    5. var val = obj.options[index].value;  


    6.获得选项option的文本

    [javascript] view plain copy
     
    1. var obj=document.getElementById('mySelect');  
    2.   
    3. var index=obj.selectedIndex; //序号，取当前选中选项的序号  
    4.   
    5. var val = obj.options[index].text;  

    7.修改选项option

    [javascript] view plain copy
     
    1. var obj=document.getElementById('mySelect');  
    2.   
    3. var index=obj.selectedIndex; //序号，取当前选中选项的序号  
    4.   
    5. var val = obj.options[index]=new Option("新文本","新值");  


    8.删除select     

    [javascript] view plain copy
     
    1. function removeSelect(){  
    2.             var mySelect = document.getElementById("mySelect");  
    3. mySelect.parentNode.removeChild(mySelect);  
    4.      }  


     

    整个实例的完整代码如下：

    [html] view plain copy
     
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">  
    2. <html>  
    3. <head>  
    4.    <meta http-equiv="Content-Type" content="text/html">  
    5. <head>  
    6.    <script language=JavaScript>  
    7.     function $(id)  
    8.     {  
    9.      return document.getElementById(id)  
    10.     }  
    11.     function show()  
    12.     {  
    13.      var selectObj=$("area")  
    14.      var myOption=document.createElement("option")  
    15.      myOption.setAttribute("value","10")  
    16.      myOption.appendChild(document.createTextNode("上海"))  
    17.      var myOption1=document.createElement("option")  
    18.      myOption1.setAttribute("value","100")  
    19.      myOption1.appendChild(document.createTextNode("南京"))  
    20.      selectObj.appendChild(myOption)  
    21.      selectObj.appendChild(myOption1)  
    22.     }  
    23.     function choice()  
    24.     {  
    25.      var index=$("area").selectedIndex;  
    26.      var val=$("area").options[index].getAttribute("value")  
    27.      if(val==10)  
    28.      {  
    29.       var i=$("context").childNodes.length-1;  
    30.      var remobj=$("context").childNodes[i];  
    31.      remobj.removeNode(true)  
    32.       var sh=document.createElement("select")  
    33.       sh.add(new Option("浦东新区","101"))  
    34.       sh.add(new Option("黄浦区","102"))  
    35.       sh.add(new Option("徐汇区","103"))  
    36.       sh.add(new Option("普陀区","104"))  
    37.       $("context").appendChild(sh)  
    38.      }  
    39.      if(val==100)  
    40.      {  
    41.       var i=$("context").childNodes.length-1;  
    42.      var remobj=$("context").childNodes[i];  
    43.      remobj.removeNode(true)  
    44.       var nj=document.createElement("select")  
    45.       nj.add(new Option("玄武区","201"))  
    46.       nj.add(new Option("白下区","202"))  
    47.       nj.add(new Option("下关区","203"))  
    48.       nj.add(new Option("栖霞区","204"))  
    49.       $("context").appendChild(nj)  
    50.      }  
    51.     }  
    52.     function calc()  
    53.     {  
    54.      var x=$("context").childNodes.length-1;  
    55.      alert(x)  
    56.     }  
    57.     function remove()  
    58.     {  
    59.      var i=$("context").childNodes.length-1;  
    60.      var remobj=$("context").childNodes[i];  
    61.      remobj.removeNode(true)  
    62.     }  
    63.    </script>  
    64. <body>  
    65. <div id="context">  
    66.    <select id="area" onchange="choice()">  
    67.    </select>  
    68. </div>  
    69. <input type=button value="显示" onclick="show()">  
    70. <input type=button value="计算结点" onclick="calc()">  
    71. <input type=button value="删除" onclick="remove()">  
    72. </body>  
    73. </html>  

    改进版：在select中添加、修改、删除option元素

    [javascript] view plain copy
     
    1. function watch_ini(){ // 初始  
    2. for(var i=0; i<arguments.length; i++){  
    3. var word = document.createElement("OPTION");  
    4. word.text = arguments[i];  
    5. watch.keywords.add(word); // watch. is form name  
    6. }  
    7. }  
    8. function watch_add(f){ // 增加  
    9. var word = document.createElement("OPTION");  
    10. word.text = f.word.value;  
    11. f.keywords.add(word);   
    12. }  
    13. 但上述 add() 方法只在IE下有效，为兼容FF和Opera，对上述代码进行了一下改进，改动后代码如下： function watch_ini(){ // 初始  
    14. for(var i=0; i<arguments.length; i++){  
    15.    var oOption=new Option(arguments[i],arguments[i]);  
    16.    document.getElementById("MySelect")[i]=oOption;  
    17. }  
    18. }  
    19. function watch_add(f){ // 增加  
    20.    var oOption=new Option(f.word.value,f.word.value);  
    21.    f.keywords[f.keywords.length]=oOption;  
    22. }  



    整个实例的完整代码如下：

    [html] view plain copy
     
    1. <!doctype html public "-//w3c//dtd html 4.0 transitional//en">  
    2. <html>  
    3. <head>  
    4. <title>javascript select options text value</title>  
    5. <meta name="keywords" content="javascript select options text value add modify delete set">  
    6. <meta name="description" content="javascript select options text value add modify delete set">  
    7. <script language="javascript">  
    8. <!--  
    9. function watch_ini(){ // 初始  
    10. for(var i=0; i<arguments.length; i++){  
    11.    var oOption=new Option(arguments[i],arguments[i]);  
    12.    document.getElementById("MySelect")[i]=oOption;  
    13. }  
    14. }  
    15. function watch_add(f){ // 增加  
    16.    var oOption=new Option(f.word.value,f.word.value);  
    17.    f.keywords[f.keywords.length]=oOption;  
    18. }  
    19. function watch_sel(f){ // 编辑  
    20. f.word.value = f.keywords[f.keywords.selectedIndex].text;  
    21. }  
    22. function watch_mod(f){ // 修改  
    23. f.keywords[f.keywords.selectedIndex].text = f.word.value;  
    24. }  
    25. function watch_del(f){ // 删除  
    26. f.keywords.remove(f.keywords.selectedIndex);  
    27. }  
    28. function watch_set(f){ // 保存  
    29. var set = "";  
    30. for(var i=0; i<f.keywords.length; i++){  
    31. set += f.keywords[i].text + ";";  
    32. }  
    33. confirm(set);  
    34. }  
    35. //-->  
    36. </script>  
    37. </head>  
    38. <body>  
    39. <form name="watch" method="post" action="">  
    40. <select id="MySelect" name="keywords" size="10" onchange="watch_sel(this.form)"></select><br>  
    41. <script language="javascript">  
    42. <!--  
    43. watch_ini("我","你","妳","他","她","它","尔"); // 初始关键词  
    44. //-->  
    45. </script>  
    46. <input type="text" name="word" /><br />  
    47. <input type="button" value="增加" onclick="watch_add(this.form);" />  
    48. <input type="button" value="修改" onclick="watch_mod(this.form);" />  
    49. <input type="button" value="删除" onclick="watch_del(this.form);" />  
    50. <input type="button" value="保存" onclick="watch_set(this.form);" />  
    51. </form>  


     

    用一个字符串创建一个数组方法:

    [javascript] view plain copy
     
    1. <script language="javascript">     
    2.   
    3. function spli(){   
    4.   
    5. datastr="2,2,3,5,6,6";        
    6.   
    7. var str= new Array();      
    8.   
    9.    str=datastr.split(",");        
    10.   
    11.  for (i=0;i<str.length ;i++ )     
    12.   
    13.   { document.write(str[i]+"<br/>");  }     
    14.   
    15. }     
    16.   
    17. spli();     
    18.   
    19. </script>  
  • 相关阅读:
    document.getElementById(), getElementsByname(),getElementsByClassName(),getElementsByTagName()方法表示什么以及其意义
    Go -10 Go Web 简单实现
    Go -09 Go 函数和方法区别
    Go -08 Go win 环境搭建
    Go-07 Go 规范代码风格
    Go-06 Go 语言注释(comment)
    Go-05 Go 转义字符
    Go-04 Go 语法要求和注意事项
    Go-03 Go 快速入门
    Go-02 搭建 Go 开发环境（mac系统）
  • 原文地址：https://www.cnblogs.com/apache-x/p/5465631.html
Copyright © 2020-2023  润新知