js操作select的option .

注意:Option中的O是要大写的，不然语法报错 

1.动态创建select

Javascript代码 
  1. function createSelect(){  
  2.   
  3. Select = document.createElement("select");  
  4.     mySelect.id = "mySelect";   
  5.     document.body.appendChild(mySelect);  
  6. }  



2.添加选项option

Javascript代码 
  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.      }  



---------------------------------------------------------------- 
Option里面的四个参数分别的意思 

new   Option   (text,value,defaultselected,selected)   
new   Option   (文本,值,默认选中的选项,选中的选项) 

看测试结果就懂了  
  <select   id="s1"></select>  
   
  <script>  
      var   op   =   new   Option("显示文本1","值1",false,false);  
      s1.options.add(op);  
      op   =     new   Option("显示文本2","值2",false,true);  
      s1.options.add(op);  
  </script> 
----------------------------------------------------------------- 

3.删除所有选项option

Javascript代码 
  1.      function removeAll(){  
  2.            var obj=document.getElementById('mySelect');  
  3. obj.options.length=0;  
  4.   
  5.      }  



4.删除一个选项option

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



5.获得选项option的值

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



6.获得选项option的文本

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



7.修改选项option

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



8.删除select

Javascript代码 
  1.       function removeSelect(){  
  2.             var mySelect = document.getElementById("mySelect");  
  3. mySelect.parentNode.removeChild(mySelect);  
  4.      }  





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

Javascript代码 
  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代码 
  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. }  


但上述 add() 方法只在IE下有效，为兼容FF和Opera，对上述代码进行了一下改进，改动后代码如下： function watch_ini(){ // 初始 

Javascript代码 
  1. for(var i=0; i<arguments.length; i++){  
  2.    var oOption=new Option(arguments[i],arguments[i]);  
  3.    document.getElementById("MySelect")[i]=oOption;  
  4. }  
  5. }  
  6. function watch_add(f){ // 增加  
  7.    var oOption=new Option(f.word.value,f.word.value);  
  8.    f.keywords[f.keywords.length]=oOption;  
  9. }  




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

Javascript代码 
  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>  
  52. </body>  
  53. </html>  
posted on 2013-10-21 14:32  西湖浪子  阅读(165)  评论(0)    收藏  举报

博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3