<!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. modern web application

    http://www.codeproject.com/Reference/597538/Modern-Web-Development http://www.west-wind.com/presenta ...

  2. 移動電源ic的概述

    移動電源ic壹種集供電和充電功能於壹體的便攜式充電器,可以給手機等數碼設備隨時隨地充電或待機供電.壹般由鋰電芯或者幹電池作為儲電單元.區別於產品內部配置的電池,也叫外掛電池.壹般配備多種電源轉接頭, ...

  3. windows环境下VS2013编译openSSL

    openssl版本:1.0.2h 编译器:MSVC (VS2013) 需要准备工具:perl. windows环境的perl下载请戳这里:http://www.activestate.com/acti ...

  4. COJ 0343 WZJ的公司（二）

    传送门:http://oj.cnuschool.org.cn/oj/home/problem.htm?problemID=313 试题描述: WZJ的公司放假了!为了保证假期期间公司的安全,WZJ决定 ...

  5. http://aws.amazon.com/cn/ses/ 亚马逊 营销性非事务邮件发送平台

    http://aws.amazon.com/cn/ses/   亚马逊 营销性非事务邮件发送平台

  6. .net 安装remoting服务

    程序->vs2008->vs tools->vs2008 命令提示 D:\QidianWorkShop\Develop\Source\Services\Snda.Qidian.Hon ...

  7. [置顶] Putty管理私钥文件

    openssh中,ssh_keygen产生的私钥,id_rsa这种密钥putty是不认识的,必须先把它转换成ppk格式, Windows上如果你安装了git,它里面bin目录下就有ssh_keygen ...

  8. Jenkins用户组管理

    Jenkins用户组管理 转载2015-06-10 21:44:24 标签:jenkinsrolestrategypluginusergroupcitools 一.安装插件 安装RoleStrateg ...

  9. jQuery(二)

    jQuery学完了!好用! 1.用定时器做的jquery里面的animate效果 <!DOCTYPE html> <html lang="en"> < ...

  10. Ubuntu + Win7 双系统 重装win7后进入不了Ubuntu

    机子上先有win7,然后装Ubuntu,装完Ubuntu后,开机进入Ub开机界面,里面有ubuntu,win7 loader(启动项),选择win7启动后就出现读盘错误. 天,我怎么能修复好这双系统启 ...