<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title></title>
     <!--添加jquery-->
     <script src="../Script/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(function () {
             createSelect("select", "addSel");
             addOption("addSel", "first", "第一个数据");
             addOption("addSel", "secord", "第二个数据");
             addOption("addSel", "three", "第三个数据");
             addOption("addSel", "four", "第四个数据");
             addOption("addSel", "fives", "第五个数据");
             removeOneByIndex();
             removeOneByObj("addSel", "secord");

             //添加一个option更改事件 调用自己写的方法
             $("#addSel").change(function () {
                 alert("旧文本："+getOptionText("addSel")  +  "旧Value：" + getOptionValue("addSel"));
                 editOptions("addSel", "新文本","新Value");  //注意：不传value值的时候  value值默认为text的值
                 alert("新文本：" + getOptionText("addSel") + "新Value：" + getOptionValue("addSel"));
             })
         })

         //动态创建带id的元素
         function createSelect(element, id) {
             var select = document.createElement(element);
             select.id = id;
             document.body.appendChild(select);
         }

         //根据select的id 添加选项option
         function addOption(selectID,value,text) {
             //根据id查找对象，
             var obj = document.getElementById(selectID);
             obj.options.add(new Option(text, value)); //这个兼容IE与firefox
         }

         //删除所有选项option
         function removeAll(selectID) {
             var obj = document.getElementById(selectID);
             obj.options.length = ;
         }

         //根据 index 值删除一个选项option
         function removeOneByIndex(selectID,index) {
             var obj = document.getElementById(selectID);
             //index,要删除选项的序号，这里取当前选中选项的序号
             //var index = obj.selectedIndex;//获取选中的选项的index;
             obj.options.remove(index);
         }

         //根据 value或者text值删除一个选项option
         function removeOneByObj(selectID, textOrValue) {
             var obj = document.getElementById(selectID);
             //index,要删除选项的序号，这里取当前选中选项的序号
             //var index = obj.selectedIndex;//获取选中的选项的index;
             ; i < obj.options.length; i++) {
                 if (obj.options[i].innerHTML == textOrValue || obj.options[i].value == textOrValue) {
                     obj.options.remove(i);
                     break;
                 }
             }
         } 

         //获得一个Option Value；
         function getOptionValue(selectID){
             var obj = document.getElementById(selectID);
             var index=obj.selectedIndex; //序号，取当前选中选项的序号
             var val = obj.options[index].value;
             return val;
         } 

         //获得一个option Text;
         function getOptionText(selectID) {
             var obj = document.getElementById(selectID);
             var index=obj.selectedIndex; //序号，取当前选中选项的序号
             var val = obj.options[index].text;
             return val;
         }

         //修改选中的option
         function editOptions(selectID,newText,newValue) {
             var obj = document.getElementById(selectID);
             var index=obj.selectedIndex; //序号，取当前选中选项的序号
             obj.options[index] = new Option(newText, newValue);
             obj.options[index].selected = true;
         }

         //删除select
         function removeSelect(){
             var select = document.getElementById("select");
             select.parentNode.removeChild(select);
         }
     </script>
 </head>
 <body>

 </body>
 </html>

javaScript的select元素和option的相关操作的更多相关文章

  1. jquery的select元素和option的相关操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. select元素添加option的add()方法 | try{}catch{}

    1.javascript中的select元素添加option使用add()方法 select的add方法,第一个参数是需要被添加的option元素,第二个参数决定了被添加的位置 普通浏览器中,第二个参 ...

  3. 使用JavaScript获取select元素选中的value和text

    示例代码如下(js直接写在了html里面,没有写在一个单独的外部文件中): <!DOCTYPE html> <html> <head> <meta name= ...

  4. jQuery获取Select元素

    jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...});   //为Se ...

  5. jquery关于Select元素的操作

    jQuery获取Select元素,并选择的Text和Value: $("#select_id").change(function(){//code...});           ...

  6. select元素javascript常用操作 转

    /*------------------------------------------------------ *作者:xieyu @ 2007-08-14 *语言:JavaScript *说明:s ...

  7. 仅Firefox中A元素包含Select时点击Select不能选择option

    这是在使用京东的一个日期组件时碰到的bug,重现bug的代码精简如下 <!DOCTYPE HTML> <html> <head> <title> 仅Fi ...

  8. JavaScript向select下拉框中加入和删除元素

    JavaScript向select下拉框中加入和删除元素 1.说明 a   利用append()方法向下拉框中加入元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源代码 < ...

  9. JavaScript向select下拉框中添加和删除元素

    JavaScript向select下拉框中添加和删除元素 1.说明 a   利用append()方法向下拉框中添加元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...

随机推荐

  1. System.Web.Http.Tracing 在webapi里面应用

    最近想写log.再接口里面 所以就想到了.net 4.0提供的这个类. 整好.配合asp.net api好使用 ,而且 本地调试会在 vs Output 里面输出. 1.开启这个Tracing con ...

  2. JDBC小结

    老师如是说:有一个规律永远不变,就是量变引起质变,什么时候你吃的盐比我吃的米多,那你就可以教我了…… 1.JDBC是一个标准,是J2EE的一部分:讲tcp时就提到了分层思想,jdbc也是分层,即上层只 ...

  3. angular-fullstack test

    1:运行yo 提示我可以升级到1.4.7版本,下面进行升级 提示需要npm>=2.8.0下面进行升级npm y@y:angular-fullstack-test$ npm install npm ...

  4. angular2 学习笔记 ( Http 请求)

    refer : https://angular.cn/docs/ts/latest/guide/server-communication.html https://xgrommx.github.io/ ...

  5. hibernate之CRUD操作

    CRUD是指在做计算处理时的增加(Create).读取(Retrieve)(重新得到数据).更新(Update)和删除(Delete)几个单词的首字母简写. 下面列举实例来讲解这几个操作: 实体类: ...

  6. Android入门之时间日期控件

    效果图: MainActivity.java package com.jkxqj.helloandroid; import android.app.Activity; import android.o ...

  7. HDOJ(HDU) 2097 Sky数(进制)

    Problem Description Sky从小喜欢奇特的东西,而且天生对数字特别敏感,一次偶然的机会,他发现了一个有趣的四位数2992,这个数,它的十进制数表示,其四位数字之和为2+9+9+2=2 ...

  8. Java---练习(面试题) ：字符串截取(2-最终版)

    在java中,字符串"abcd"与字符串"ab你好"的长度是一样,都是四个字符. 但对应的字节数不同,一个汉字占两个字节. 定义一个方法,按照指定的字节数来取子 ...

  9. Aggregating tests in suites

    我们可以将来自不同类的test组成一个test suite.在JUnit 3.8.x我们使用 static Test suite()方法,但是在JUnit4我们使用在类前面加上注释 @RunWith( ...

  10. 一个C++的多态和虚函数实例

    类的说明: code: #include<iostream> #include<string> #define PAI 3.1415926 using namespace st ...