1.动态创建select

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

2.添加选项option

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

3.删除所有选项option

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

4.删除一个选项option

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

5.获得选项option的值

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

6.获得选项option的文本

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

7.修改选项option

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

8.删除select

  1. function removeSelect(){
  2. var mySelect = document.getElementById("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.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>

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

  1. <script language="javascript">
  2. function spli(){
  3. datastr="2,2,3,5,6,6";
  4. var str= new Array();
  5. str=datastr.split(",");
  6. for (i=0;i<str.length ;i++ )
  7. { document.write(str[i]+"<br/>");  }
  8. }
  9. spli();
  10. </script>

动态创建selectjs 操作select和option的更多相关文章

  1. js 操作select和option

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

  2. vue操作select获取option值

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

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

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

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

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

  5. js操作select和option

    1.动态创建select function createSelect(){ var mySelect = document.createElement_x("select"); m ...

  6. js创建dom操作select

    document.getElementById("column-left").getElementsByTagName("header")[0].onclick ...

  7. JS操作select下拉框动态变动(创建/删除/获取)

    1.动态创建select function createSelect(){ var mySelect = document.createElement_x("select"); m ...

  8. JS/JQ动态创建（添加）optgroup和option属性

    JavaScript和Jquery动态操作select下拉框 相信在前端设计中必然不会少的了表单,因为经常会使用到下拉框选项,又或是把数据动态回显到下拉框中.因为之前牵扯到optgroup标签时遇到了 ...

  9. JS对select动态添加options操作[IE&FireFox兼容]

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

随机推荐

  1. TCP/IP协议分析(推荐)

    一;前言 学习过TCP/IP协议的人多有一种感觉,这东西太抽象了,没有什么数据实例,看完不久就忘了.本文将介绍一种直观的学习方法,利用协议分析工具学习TCP/IP,在学习的过程中能直观的看到数据的具体 ...

  2. ubuntu安装rpm格式软件包

    转载自:http://os.51cto.com/art/200708/53942.htm ubuntu的软件包格式是deb,如果要安装rpm的包,则要先用alien把rpm转换成deb.用alien转 ...

  3. 编写批处理命令来执行JAVA文件

    http://baobeituping.iteye.com/blog/802543 1. JAVA工程路径结构 Project    ------lib    ------src    ------W ...

  4. unity4.6 Beta版 UI控件之Button

    近期需求,须要用到4.6版本号uGui了,所以抽时间来学习学习,就UI控件在Unity工具里创建预设这块来说相比較于NGUI,我认为是没有什么太大的差别的. 比方:Canvas--Camera . T ...

  5. /var/log目录下的Linux日志文件功能详解_转

    摘自:http://www.niaoyun.com/help/application/386.html 学习linux应该知道日志文件的所在位置以及它们包含的内容,在系统运行正常的情况下学习了解这些不 ...

  6. Duang，HUAWEI DevEco IDE全面升级啦

    想感受全新UI带来的视觉及交互体验. HiKey970开发板调测. HiAI API推荐和收藏. 深度AI模型分析等新功能, 体验高清晰度和流畅度的远程AI真机调测吗? 全新的UI设计 采用最优秀的视 ...

  7. delphi 无边框窗体常见问题

    实现无边框窗体很简单,直接将窗体的BorderStyle属性设置为bsNone即可.但是这样会引起2个问题: 1.在xp系统下,任务栏鼠标右键点击无法弹出菜单 解决办法:在FormShow中加入这个过 ...

  8. LeakCanary Android 和 Java 内存泄露检测

    说起内存泄漏还是挺让人头疼的,而且不是每个手机都会发生的情况,往往又不易察觉,那么今天我们就来介绍下LeakCanary这个工具 githup:https://github.com/square/le ...

  9. 记pytorch版faster rcnn配置运行中的一些坑

    记pytorch版faster rcnn配置运行中的一些坑 项目地址 https://github.com/jwyang/faster-rcnn.pytorch 一般安装配置参考README.md文件 ...

  10. 生成JNI的DLL时提示找不到jni.h的解决的方法Cannot open include file: &#39;jni.h&#39;: No such file or directory

    解决的方法: 就是到jdk的安装文件夹下include下把下面对应的文件,拷贝到vc文件夹下的include文件夹下 \jdk\include\jni.h \jdk\include\win32\jaw ...