Js操作select（getElementById的用法）

  1. 注意:Option中的O是要大写的，不然语法报错    
  2.   
  3. 1.动态创建select   
  4.   
  5. Javascript代码    
  6. function createSelect(){      
  7.       
  8. Select = document.createElement("select");      
  9.     mySelect.id = "mySelect";       
  10.     document.body.appendChild(mySelect);      
  11. }      
  12.   
  13.   
  14. 2.添加选项option   
  15.   
  16. Javascript代码    
  17.      function addOption(){      
  18.       
  19.           //根据id查找对象，      
  20.            var obj=document.getElementById('mySelect');      
  21.       
  22.            //添加一个选项      
  23. obj.add(new Option("文本","值"));    //这个只能在IE中有效      
  24.          obj.options.add(new Option("text","value")); //这个兼容IE与firefox      
  25.      }      
  26.   
  27.   
  28. ----------------------------------------------------------------    
  29. Option里面的四个参数分别的意思    
  30.   
  31. new   Option   (text,value,defaultselected,selected)      
  32. new   Option   (文本,值,默认选中的选项,选中的选项)    
  33.   
  34. 看测试结果就懂了     
  35.   <select   id="s1"></select>     
  36.       
  37.   <script>     
  38.       var   op   =   new   Option("显示文本1","值1",false,false);     
  39.       s1.options.add(op);     
  40.       op   =     new   Option("显示文本2","值2",false,true);     
  41.       s1.options.add(op);     
  42.   </script>    
  43. -----------------------------------------------------------------    
  44.   
  45. 3.删除所有选项option   
  46.   
  47. Javascript代码    
  48.      function removeAll(){      
  49.            var obj=document.getElementById('mySelect');      
  50. obj.options.length=0;      
  51.       
  52.      }      
  53.   
  54.   
  55. 4.删除一个选项option   
  56.   
  57. Javascript代码    
  58. function removeOne(){      
  59.            var obj=document.getElementById('mySelect');      
  60.       
  61.            //index,要删除选项的序号，这里取当前选中选项的序号      
  62.       
  63. var index=obj.selectedIndex;      
  64. obj.options.remove(index);      
  65.      }      
  66.   
  67.   
  68. 5.获得选项option的值   
  69.   
  70. Javascript代码    
  71. var obj=document.getElementById('mySelect');      
  72.       
  73. var index=obj.selectedIndex; //序号，取当前选中选项的序号      
  74.       
  75. var val = obj.options[index].value;      
  76.   
  77.   
  78. 6.获得选项option的文本   
  79.   
  80. Javascript代码    
  81. var obj=document.getElementById('mySelect');      
  82.       
  83. var index=obj.selectedIndex; //序号，取当前选中选项的序号      
  84.       
  85. var val = obj.options[index].text;      
  86.   
  87.   
  88. 7.修改选项option   
  89.   
  90. Javascript代码    
  91. var obj=document.getElementById('mySelect');      
  92.       
  93. var index=obj.selectedIndex; //序号，取当前选中选项的序号      
  94.       
  95. var val = obj.options[index]=new Option("新文本","新值");      
  96.   
  97.   
  98. 8.删除select   
  99.   
  100. Javascript代码    
  101.       function removeSelect(){      
  102.             var mySelect = document.getElementById("mySelect");      
  103. mySelect.parentNode.removeChild(mySelect);      
  104.      }      
  105.   
  106.   
  107.   
  108.   
  109. 整个实例的完整代码如下：   
  110.   
  111. Javascript代码    
  112. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">      
  113. <html>      
  114. <head>      
  115.    <meta http-equiv="Content-Type" content="text/html">      
  116. <head>      
  117.    <script language=JavaScript>      
  118.     function $(id)      
  119.     {      
  120.      return document.getElementById(id)      
  121.     }      
  122.     function show()      
  123.     {      
  124.      var selectObj=$("area")      
  125.      var myOption=document.createElement("option")      
  126.      myOption.setAttribute("value","10")      
  127.      myOption.appendChild(document.createTextNode("上海"))      
  128.      var myOption1=document.createElement("option")      
  129.      myOption1.setAttribute("value","100")      
  130.      myOption1.appendChild(document.createTextNode("南京"))      
  131.      selectObj.appendChild(myOption)      
  132.      selectObj.appendChild(myOption1)      
  133.     }      
  134.     function choice()      
  135.     {      
  136.      var index=$("area").selectedIndex;      
  137.      var val=$("area").options[index].getAttribute("value")      
  138.      if(val==10)      
  139.      {      
  140.       var i=$("context").childNodes.length-1;      
  141.      var remobj=$("context").childNodes[i];      
  142.      remobj.removeNode(true)      
  143.       var sh=document.createElement("select")      
  144.       sh.add(new Option("浦东新区","101"))      
  145.       sh.add(new Option("黄浦区","102"))      
  146.       sh.add(new Option("徐汇区","103"))      
  147.       sh.add(new Option("普陀区","104"))      
  148.       $("context").appendChild(sh)      
  149.      }      
  150.      if(val==100)      
  151.      {      
  152.       var i=$("context").childNodes.length-1;      
  153.      var remobj=$("context").childNodes[i];      
  154.      remobj.removeNode(true)      
  155.       var nj=document.createElement("select")      
  156.       nj.add(new Option("玄武区","201"))      
  157.       nj.add(new Option("白下区","202"))      
  158.       nj.add(new Option("下关区","203"))      
  159.       nj.add(new Option("栖霞区","204"))      
  160.       $("context").appendChild(nj)      
  161.      }      
  162.     }      
  163.     function calc()      
  164.     {      
  165.      var x=$("context").childNodes.length-1;      
  166.      alert(x)      
  167.     }      
  168.     function remove()      
  169.     {      
  170.      var i=$("context").childNodes.length-1;      
  171.      var remobj=$("context").childNodes[i];      
  172.      remobj.removeNode(true)      
  173.     }      
  174.    </script>      
  175. <body>      
  176. <div id="context">      
  177.    <select id="area" onchange="choice()">      
  178.    </select>      
  179. </div>      
  180. <input type=button value="显示" onclick="show()">      
  181. <input type=button value="计算结点" onclick="calc()">      
  182. <input type=button value="删除" onclick="remove()">      
  183. </body>      
  184. </html>      
  185.   
  186.   
  187.   
  188.   
  189. 改进版：在select中添加、修改、删除option元素   
  190.   
  191. Javascript代码    
  192. function watch_ini(){ // 初始      
  193. for(var i=0; i<arguments.length; i++){      
  194. var word = document.createElement("OPTION");      
  195. word.text = arguments[i];      
  196. watch.keywords.add(word); // watch. is form name      
  197. }      
  198. }      
  199. function watch_add(f){ // 增加      
  200. var word = document.createElement("OPTION");      
  201. word.text = f.word.value;      
  202. f.keywords.add(word);      
  203. }      
  204.   
  205. 但上述 add() 方法只在IE下有效，为兼容FF和Opera，对上述代码进行了一下改进，改动后代码如下： function watch_ini(){ // 初始    
  206.   
  207. Javascript代码    
  208. for(var i=0; i<arguments.length; i++){      
  209.    var oOption=new Option(arguments[i],arguments[i]);      
  210.    document.getElementById("MySelect")[i]=oOption;      
  211. }      
  212. }      
  213. function watch_add(f){ // 增加      
  214.    var oOption=new Option(f.word.value,f.word.value);      
  215.    f.keywords[f.keywords.length]=oOption;      
  216. }      
  217.   
  218.   
  219.   
  220. 整个实例的完整代码如下：   
  221.   
  222. Javascript代码    
  223. <!doctype html public "-//w3c//dtd html 4.0 transitional//en">      
  224. <html>      
  225. <head>      
  226. <title>javascript select options text value</title>      
  227. <meta name="keywords" content="javascript select options text value add modify delete set">      
  228. <meta name="description" content="javascript select options text value add modify delete set">      
  229. <script language="javascript">      
  230. <!--      
  231. function watch_ini(){ // 初始      
  232. for(var i=0; i<arguments.length; i++){      
  233.    var oOption=new Option(arguments[i],arguments[i]);      
  234.    document.getElementById("MySelect")[i]=oOption;      
  235. }      
  236. }      
  237. function watch_add(f){ // 增加      
  238.    var oOption=new Option(f.word.value,f.word.value);      
  239.    f.keywords[f.keywords.length]=oOption;      
  240. }      
  241. function watch_sel(f){ // 编辑      
  242. f.word.value = f.keywords[f.keywords.selectedIndex].text;      
  243. }      
  244. function watch_mod(f){ // 修改      
  245. f.keywords[f.keywords.selectedIndex].text = f.word.value;      
  246. }      
  247. function watch_del(f){ // 删除      
  248. f.keywords.remove(f.keywords.selectedIndex);      
  249. }      
  250. function watch_set(f){ // 保存      
  251. var set = "";      
  252. for(var i=0; i<f.keywords.length; i++){      
  253. set += f.keywords[i].text + ";";      
  254. }      
  255. confirm(set);      
  256. }      
  257. //-->      
  258. </script>      
  259. </head>      
  260. <body>      
  261. <form name="watch" method="post" action="">      
  262. <select id="MySelect" name="keywords" size="10" onchange="watch_sel(this.form)"></select><br>      
  263. <script language="javascript">      
  264. <!--      
  265. watch_ini("我","你","妳","他","她","它","尔"); // 初始关键词      
  266. //-->      
  267. </script>      
  268. <input type="text" name="word" /><br />      
  269. <input type="button" value="增加" onclick="watch_add(this.form);" />      
  270. <input type="button" value="修改" onclick="watch_mod(this.form);" />      
  271. <input type="button" value="删除" onclick="watch_del(this.form);" />      
  272. <input type="button" value="保存" onclick="watch_set(this.form);" />      
  273. </form>      
  274. </body>      
  275. </html>      
  276.   
  277.   
  278. 本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/yefengzhixia/archive/2009/04/17/4087284.aspx  
posted @   windwos7  阅读(7823)  评论(0)  编辑  收藏  举报
编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
点击留言
点击右上角即可分享
微信分享提示
AI IDE Trae