<!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. Zend framework重定向的方法

    zend framework重定向的方法有三种.render, forward, redirect.它们各自的用法是什么样子的呢?有什么区别呢? 一.render render是用来调视图用的,不会调 ...

  2. android 菜单事件处理

    package com.example.wenandroid; import android.app.Activity; import android.os.Bundle; import androi ...

  3. REST服务中的日志可视化（关键技术实现）

    引言 在系统构建完成之后,我们通常会使用REST API对外提供服务,在REST API的处理过程中经常会出现一些异想不到的问题(用户权限不足.参数不全.数据库访问异常等),导致请求失败,很多时候用户 ...

  4. .net 安装remoting服务

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

  5. java在windows下加载dll

    java在类中加载动态链接库文件. 类文件中: static { System.loadLibrary("dll文件"); } dll文件在工程的包路径下.例如:pro/bin/h ...

  6. python_Opencv_绘图

    opencv中也可以用一些函数来绘图 直接上源码,例子: # -*- coding: utf-8 -*- import numpy as np import cv2 # 黑色的图片 img=np.ze ...

  7. 001_python变量命名规范(待实践一遍)

    参考: http://blog.sina.com.cn/s/blog_62f28d560100xv85.html https://my.oschina.net/leejun2005/blog/3871 ...

  8. 适配ios7

    if ([self respondsToSelector:@selector(edgesForExtendedLayout)]) { self.edgesForExtendedLayout = UIR ...

  9. Android Studio常用插件

    ButterKnife 这个开源库可以让我们从大量的findViewById()和setonclicktListener()解放出来,其对性能的影响微乎其微(查看过Butter Knife的源码,其自 ...

  10. Android 单指触控拖拽，两指触控缩放

    import android.app.Activity; import android.os.Bundle; import android.util.Log; import android.view. ...