<!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. JSP前端总结

    一.C标签    一] <c:out value="..." default="..." escapeXml="true">   ...

  2. 足球3v3心得

    最近常踢球,由于不容易凑人,所以都是最小场:3v3.一开始是凭发育踢,谁的体力好.技术好.速度快.身体壮谁占优.渐渐觉得这样没有意思,就花点时间研究了下足球技战术,总结出几个简单的规律,后来发现这些好 ...

  3. Android--广播BroadcastReceiver

    前言 Android四大组件,Activity.Service.ContentProvider.BroadcastReceiver,除了BroadcastReceiver之外,其他的在之前的博客中都有 ...

  4. HBase Split

    Region Split请求是在Region MemStore Flush之后被触发的: boolean shouldCompact = region.flushcache(); // We just ...

  5. 修改mysql数据存储的地址

    修改mysql数据存储的地址 修改步骤如下 1,修改前为默认路径/var/lib/mysql/,计划修改为/data/mysql/data mysql> show variables like ...

  6. jQuery on()绑定动态元素出现的问题小结

    jQuery on()方法是官方推荐的绑定事件的一个方法.使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件,通过本文给大家介绍jQuery on()绑定动态元素出现的问题小结,需要的朋友 ...

  7. UVa 11063 - B2-Sequence

    题目:给你一组数据{ b1,b2....,bk }中,推断是否随意两个数字的和都不同. 分析:数论.计算出全部结果,排序推断相邻结果是否同样就可以. 说明:注意数据的合法性检查. #include & ...

  8. Android 出现警告Exported service does not require permission

    在配置Android清单文件的时候,配置service,或者activity,或者receive的时候,出现Exported service does not require permission警告 ...

  9. Java 异常处理的误区和经验总结--转载

    本文着重介绍了 Java 异常选择和使用中的一些误区,希望各位读者能够熟练掌握异常处理的一些注意点和原则,注意总结和归纳.只有处理好了异常,才能提升开发人员的基本素养,提高系统的健壮性,提升用户体验, ...

  10. 《UNIX网络编程》之多客户连接服务端，可重用套接字对

    该网络编程之客户端与服务端程序模板支持: 1. 多客户端同时连接服务端,即服务程序可以同时为多个客户端服务: 2. 服务端支持套接字对重用,即即使处于TIME_WAIT状态,仍可支持服务端重启: 3. ...