1.动态创建select

  1. function createSelect(){
  2. 　　　var mySelect = document.createElement_x("select");
  3.      mySelect.id = "mySelect";
  4.      document.body.appendChild(mySelect);
  5. }

2.添加选项option

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

3.删除所有选项option

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

4.删除一个选项option

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

5.获得选项option的值

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

6.获得选项option的文本

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

7.修改选项option

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

8.删除select

  1. function removeSelect(){
  2.        var mySelect = document.getElementByIdx_x("mySelect");
  3.        mySelect.parentNode.removeChild(mySelect);
  4. }

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

  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.getElementByIdx_x(id)
  10.      }
  11.      function show()
  12.      {
  13.       var selectObj=$("area")
  14.       var myOption=document.createElement_x("option")
  15.       myOption.setAttribute("value","10")
  16.       myOption.appendChild(document.createTextNode("上海"))
  17.       var myOption1=document.createElement_x("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_x("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_x("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_x("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_x("OPTION");
  10.      word.text = f.word.value;
  11.      f.keywords.add(word);
  12. }
  13. 但上述 add() 方法只在IE下有效，为兼容FF和Opera，对上述代码进行了一下改进，改动后代码如下：
  14. function watch_ini(){ // 初始
  15.     for(var i=0; i<arguments.length; i++){
  16.         var oOption=new Option(arguments[i],arguments[i]);
  17.         document.getElementByIdx_x("MySelect")[i]=oOption;
  18.      }
  19. }
  20. function watch_add(f){ // 增加
  21.     var oOption=new Option(f.word.value,f.word.value);
  22.     f.keywords[f.keywords.length]=oOption;
  23. }

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

  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.getElementByIdx_x("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>

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

  1. <script language="javascript">
  2.  </body>
  3.  </html>
  4.  <script>
  5.  function spli(){
  6.  datastr="2,2,3,5,6,6";
  7.  var str= new Array();
  8.     str=datastr.split(",");
  9.      for (i=0;i<str.length ;i++ )
  10.       { document.write(str[i]+"<br/>");  }
  11.  }
  12.  spli();
  13.  </script
  14. 今天调试了一段js，在ie上运行良好，在火狐上调试出现错误，查资料发现
  15.  
  16. obj.add(new Option("文本","值"));    //这个只能在IE中有效
  17.           obj.options.add(new Option("text","value")); //这个兼容IE与firefox

js操作select和option的更多相关文章

  1. js 操作select和option

    js 操作select和option 1.动态创建select function createSelect(){ var mySelect = document.createElement_x(&qu ...

  2. js 操作select和option常用代码整理

    1.获取选中select的value和text,html代码如下: <select id="mySelect"> <option value="1&qu ...

  3. js 操作select和option常见用法

    1.获取选中select的value和text,html <select id="mySelect"> <option value="1"&g ...

  4. Js操作Select大全(取值、设置选中)

    Js操作Select是很常见的,也是比较实用的. jquery操作select(取值,设置选中) 每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<s ...

  5. Js操作Select

    jquery操作select(取值,设置选中) 每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selecto ...

  6. JS操作select标签

    主要利用这个来实现省市区三级联动的 我利用的是ajax,每一次onchange事件都改变相对应的select中的option,数据全是ajax请求服务器查询数据库而来的,效果还可以,在本地测试的时候速 ...

  7. Js操作Select大全(取值、设置选中等等)

    jquery操作select(取值,设置选中) 每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selecto ...

  8. js操作select控件大全(包含新增、修改、删除、选中、清空、判断存在等)

    原文:js操作select控件大全(包含新增.修改.删除.选中.清空.判断存在等) js操作select控件大全(包含新增.修改.删除.选中.清空.判断存在等) js 代码// 1.判断select选 ...

  9. vue操作select获取option值

    如何实时的获取你选中的值 只用@change件事 @change="changeProduct($event)" 动态传递参数 vue操作select获取option的ID值 如果 ...

随机推荐

  1. maven项目构建

    Maven是apache的一个开源项目.是一个用来把源代码构建成可发布的构件的工具. Maven的功能非常强大,可以认为是一个项目管理工具,不仅仅是一个构建工具. Maven本身的核心很小,但是可以在 ...

  2. php中 xml json 数组 之间相互转换

    php中 xml json  数组 之间相互转换 1 数组转json $result = array( 'status' =>$status, 'message'=>$message, ' ...

  3. POJ 3026 Borg Maze（Prim+BFS建邻接矩阵）

    (￣▽￣)" #include<iostream> #include<cstdio> #include<cstring> #include<algo ...

  4. OpenCV2.x自学笔记——形态学运算

    名称 标识符 作用 原理 腐蚀 MORPH_ERODE 膨胀 MORPH_DILATE 开运算 MORPH_OPEN 消除细白点 先腐蚀后膨胀 闭运算 MORPH_CLOSE 消除小黑洞 先膨胀后腐蚀 ...

  5. NSConditionLock

    一.NSConditionLock定义了一个可以指定条件的互斥锁,用于线程之间的互斥与同步. 这里的条件并不是bool表达式中的条件,而是一个特定的int值. 二.NSConditionLock的AP ...

  6. luci-bwc

    文件位于:   ../feeds/luci/modules/admin-full/src/luci-bwc.c 功能: Very simple bandwidth collector cache fo ...

  7. idea 切换新项目 新窗口 原窗口

    选择 file--setting. 在新打开的窗口中选择 Appearance & Behavior--System Settings 点 Confirm window to open pro ...

  8. 用CMD开启、关闭软件

    关闭 (正常)  taskkill /IM 1.100.exe 开启 : "路径"

  9. Raft详解分析

    1.投票部分 一个candidate向所有其他的server发送RequesetVote RPC(具体格式见论文),每次从RPC的reply中累加voteCount,如果超过一半,这个candidat ...

  10. Power oj2498/DP/递推

    power oj 2498 /递推 2498: 新年礼物 Time Limit: 1000 MS Memory Limit: 65536 KBTotal Submit: 12 Accepted: 3  ...