1.动态创建select

function createSelect(){

          var mySelect = document.createElement("select");
          mySelect.id = "mySelect";
          document.body.appendChild(mySelect);
      }

2.添加选项option

function addOption(){

//根据id查找对象，
           var obj=document.getElementById('mySelect');

//添加一个选项
        
obj.add(new Option("文本","值"));    //这个只能在IE中有效
         obj.options.add(new Option("text","value")); //这个兼容IE与firefox
     }

3.删除所有选项option

function removeAll(){
           var obj=document.getElementById('mySelect');
          
obj.options.length=0;

}

4.删除一个选项option

function removeOne(){
           var obj=document.getElementById('mySelect');

//index,要删除选项的序号，这里取当前选中选项的序号

         var index=obj.selectedIndex;
        
obj.options.remove(index);
     }

5.获得选项option的值

var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index].value;

6.获得选项option的文本

var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index].text;

7.修改选项option

var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index]=new Option("新文本","新值");

8.删除select

function removeSelect(){
            var mySelect = document.getElementById("mySelect");
           
mySelect.parentNode.removeChild(mySelect);
     }

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

  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元素

  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. }

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

  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>

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

<script language="javascript">

</body>
</html>

<script>functionspli(){datastr="2,2,3,5,6,6";

varstr=newArray();

str=datastr.split(",");

for(i=0;i<str.length ;i++ )

{document.write(str[i]+"<br/>");  }   }

spli();

</script>

-- 来源于互联网

js动态创建和删除option的更多相关文章

  1. js动态创建表格,删除行列的小例子

    js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  2. 通过JS动态创建和删除HTML元素

    <script type="text/javascript" language="Javascript"> function InputOnBlur ...

  3. js动态创建及移除div的方法

    本文实例讲述了js动态创建及移除div的方法.分享给大家供大家参考.具体实现方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

  4. 用JS动态创建登录表单，报了个小错误

    后来发现原来是: dvObj.style.border='#Red 1px sold'; 其中的Red多谢了一个‘#’, 但是奇怪的是在chrome和firefox都备有报错,但是在ie中报错了. 各 ...

  5. js动态创建样式: style 和 link

    js动态创建样式: style 和 link ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 有很多提供动态创建 ...

  6. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  7. UEditor js动态创建和textarea中渲染【原】

    UEditor动态创建和textarea中渲染 http://ueditor.baidu.com/website/examples/textareaDemo.html <!DOCTYPE> ...

  8. JS动态创建Table,Tr,Td并赋值

    JS动态创建Table,Tr,Td并赋值. 成果库修改: 要求主题列表随成果类型改变而改变 网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Tab ...

  9. js 动态创建变量

      js 动态创建变量 CreationTime--2018年7月2日15点04分 Author:Marydon 1.实现方式 通过eval()实现 2.代码实现 /** * 声明一个函数 * @ex ...

随机推荐

  1. Python多线程常用包对比

    python由于本身的特质,不能实现真正的多核并行运算,但是有一些第三方库较好地模拟了在多核环境下的并行运算,例如pp包以及multiprocessing,那么哪种更能充分利用多核心呢? 这里我简单做 ...

  2. PHPExcel 使用（1）

    最近在项目中要用到PHP生成EXCEL,上网找了一下,发现PHPEXCEL挺不错,用了一下,感觉还行,就是设置单元格格式的时候比较麻烦,总体来说功能还是比较强大的,还有生成PDF什么的,发一个实例吧 ...

  3. solr in action

    Miscellaneous settings: Lucene version solr使用luceneMatchVersion来决定当前索引正在使用的lucene版本及是否禁用新版本的特性.

  4. 使用Derby ij客户端工具

    Derby是开源的.嵌入式的Java数据库程序,ij是Derby提供的客户端工具,相当于其他数据库提供的sqlplus工具. ij是纯Java的程序,不用安装,使用起来就像运行普通的Java应用程序一 ...

  5. AC日记——[HNOI2008]越狱 bzoj 1008

    1008 思路: 越狱情况=总情况-不越狱情况: 代码: #include <cstdio> #include <cstring> #include <iostream& ...

  6. 自己在用的几个sublime text3插件

    Arduino-like IDE ConvertToUTF8 Emmet(前身是zen coding) Keymap Redefiner Package Control PyV8 SideBarEnh ...

  7. python2和python3中的编码问题

    开始拾起python,准备使用python3, 造轮子的过程中遇到了编码的问题,又看了一下python3和python2相比变化的部分. 首先说个概念: unicode:在本文中表示用4byte表示的 ...

  8. [centos6.5] 完全卸载httpd mysql php

    rpm -qa|grep mysql # 列出所有mysql相关包 rpm -e 包名 # 逐一卸载,一个方便技巧是:卸载时可以不带版本,比如 # mysqlclient10-3.23.58-4.RH ...

  9. ACM竞赛常用头文件模板-备忘

    备忘. #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> ...

  10. 【bzoj2763】[JLOI2011]飞行路线 （分层图最短路）（优先队列dij）

    [bzoj2763][JLOI2011]飞行路线 2014年3月25日1,7260 Description Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司.该航空公司一共在n个城 ...