您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net:操作select和option常用代码整理,表

新葡亰496net:操作select和option常用代码整理,表

发布时间:2019-10-22 02:31编辑:新葡亰官网浏览(129)

    表单元素之下拉系

    2016/01/19 · HTML5 · 表单

    原文出处: 司徒正美(@司徒正美)   

    这里特指下拉框,select。但select有两种形态,由multiple属性决定。在多选形态下,用户按住shift键就能实现多选,但用得不多,主要是占空间。那我们着重说说单选形态及其结构。

    下拉框是由多种元素组成,通常我们见过select套着option元素,这中间还能夹一层,optgroup就是对option元素进行分组。option元素里面不能放置其他元素节点,option元素间除了空白或注释节点,也不能放其他东西。

    optgroup只是装饰用,对提交数据没有影响,当我们选中某个option元素时,它的selected属性就变成true,之前被选中的元素的selected属性变成false,select元素中selectedIndex的值会变成被选元素的序号(它在所有option元素的位置 )。此外,还有一个鲜为人知的属性selectedOptions,它是对应一个数组,装着被选中的元素,那么它就换成被选中元素。因此DOM操作是一种非常复杂与高消耗的行为,这导致基于虚拟DOM的react库的诞生。减少不必要的DOM操作,就能大幅提高性能。

    select的值就是被选中的option元素的值,如果用户定义value属性,那么这值就是option.value,否则就是option的innerHTML,也就是option.text。这当中存在兼容问题,比如有的浏览器会对innerHTML进行两端空白trim操作,有的不会,建议统一使用trim操作。

    XHTML

    <select name="aaa"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>

    1
    2
    3
    4
    5
    6
    <select name="aaa">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>

    option.value的提取方法如下:

    JavaScript

    //by 司徒正美 var roption = /^<option(?:s w (?:s*=s*(?:"[^"]*"|'[^']*'|[^s>] ))?)*s value[s=]/i var valHooks = { "option:get": IEVersion ? function (node) { //在IE11及W3C,如果没有指定value,那么node.value默认为node.text(存在trim作),但IE9-10则是取innerHTML(没trim操作) //specified并不可靠,因此通过分析outerHTML判定用户有没有显示定义value return roption.test(node.outerHTML) ? node.value : node.text.trim() } : function (node) { return node.value } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    //by 司徒正美
    var roption = /^<option(?:s w (?:s*=s*(?:"[^"]*"|'[^']*'|[^s>] ))?)*s value[s=]/i
    var valHooks = {
        "option:get": IEVersion ? function (node) {
            //在IE11及W3C,如果没有指定value,那么node.value默认为node.text(存在trim作),但IE9-10则是取innerHTML(没trim操作)
            //specified并不可靠,因此通过分析outerHTML判定用户有没有显示定义value
            return roption.test(node.outerHTML) ? node.value : node.text.trim()
        } : function (node) {
            return node.value
        }
    }

    我们在看看如何动态添加option元素。这有两种方式,1是使用W3C的createElement与appendChild,2是使用new Option及options.add方法。

    1.动态创建select

    html中的select标签,也是asp.net中的asp:DropDownList控件。
    javascript对它们的操作
    一、基础理解

    <select id="ddlResourceType" onchange="getvalue(this)"> </select>
    动态删除select中的所有options:
    document.getElementById("ddlResourceType").options.length=0;
    动态删除select中的某一项option:
    document.getElementById("ddlResourceType").options.remove(indx);
    动态添加select中的项option:
    document.getElementById("ddlResourceType").options.add(new Option(text,value));
    上面在IE和FireFox都能测试成功,希望以后你可以用上。
    其实用标准的DOM操作也可以,就是document.createElement,appendChild,removeChild之类的。
    取值方面

    1、获取选中select的value和text,html代码如下

    1. 直接使用select.innerHTML

    //by 司徒正美 select.innerHTML = '';

    1
    2
    //by 司徒正美
        select.innerHTML = '';

    运行发现标准浏览器如chrome, firefox运行正常,DOM树为

    新葡亰496net 1

    IE(678)全家都呵呵了:

    新葡亰496net 2

    原因在于IE使用innerHTML给select赋值时会根据/^&/(尖括号中间的字母、数字,引号,空格)匹配的字符都干掉,无力吐槽。

          function createSelect(){

    复制代码 代码如下:

    复制代码 代码如下:

    复制代码 代码如下:

    2. 使用new Option创建select的options,这是比较推荐的方法。

    我们先来看看Option构造器是怎么用的

    //by 司徒正美 new option(text,value,defaultSelected,selected) /* text:字符串,指定option对象的text属性(即之间的文字) value:字符串,指定option对象的value属性 defaultSelected:布尔值,指定option对象的defaultSelected属性 返回下面selected的默认值 selected:布尔值,指定option对象的selected属性 ture/false 是否选择 */

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    //by 司徒正美
     
    new option(text,value,defaultSelected,selected)
    /*
    text:字符串,指定option对象的text属性(即之间的文字)
     
    value:字符串,指定option对象的value属性
     
    defaultSelected:布尔值,指定option对象的defaultSelected属性   返回下面selected的默认值
     
    selected:布尔值,指定option对象的selected属性  ture/false  是否选择
     
    http://www.cnblogs.com/SpringSmallGrass/archive/2013/04/14/3019837.html
    */

    除了第一个参数,其他都是可选的,相当于

    //by 司徒正美 var option = document.createElement("option") option.text = "xxxx" option.value = "aaa" option.selected = true

    1
    2
    3
    4
    5
    //by 司徒正美
       var option =  document.createElement("option")
      option.text = "xxxx"
      option.value = "aaa"
      option.selected = true

    再看options.add方法。options是select元素的一个数组属性,里面装着所有option元素。add是其上面的一个方法( IE中它也能出现在select元素上),此方法存在兼容问题。

    var objSelect = document.getElementById('mySelect'); //添加一个选项 objSelect.add(new Option("文本","值")); //这个只能在IE中有效 objSelect.options.add(new Option("text","value")); //这个兼容IE与firefox

    1
    2
    3
    4
    var objSelect = document.getElementById('mySelect');
    //添加一个选项
    objSelect.add(new Option("文本","值")); //这个只能在IE中有效
    objSelect.options.add(new Option("text","value")); //这个兼容IE与firefox

    options.add有两种传参方式,第一种要来传入两个元素,第一个是新option元素,第二个是已有的option元素,新元素会插入到旧元素之前。问题出现在第二个参数缺省的情况下:

    objSelect.add(new Option("Label", "Value"), null);

    1
    objSelect.add(new Option("Label", "Value"), null);

    请注意,在IE6及IE7下请使用不带null参数的add方法,在FF下请使用带null参数的方法,IE8下带不带都可以。
    很奇怪为什么一定要加null,我猜测add方法里一定使用了’=== null’来判断第二的参数或者没有对参数数组的长度做验证。

    还有一种传参方法,第一个是新option元素,第二个是插入位置,不写默认插入到末尾。

    objSelect.add( new Option(txt, val)); //加在末尾 objSelect.add( new Option(txt, val),0);//加在开头

    1
    2
    objSelect.add( new Option(txt, val)); //加在末尾
    objSelect.add( new Option(txt, val),0);//加在开头

    早期IE是不支持传入两个元素,只支持传入元素与插入位置的方式。IE8是两种方式都支持,对于普通浏览器,如果传入的是索引数值,它不会认为是出错,还是会添加在最后。

    JavaScript

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> //try{先执行的代码} catch(err){出错时执行的代码} //select的add方法,第一个参数是需要被添加的option元素,第二个参数决定了被添加的位置 //普通浏览器中,第二个参数是一个既有的option对象,添加的option元素被插入到它之前. //ie7浏览器中,第二个参数是一个索引,表示第n个既有的option对象. //ie8以上版本,传入两种对象它都能识别. //如果没有第二个参数,则插入在最后. //对于普通浏览器,如果传入的是索引数值,它不会认为是出错,还是会添加在最后,所以,使用try{}catch{}方法解决这个问题,必须把普通浏览器的适用方法放在try里面. window.onload = function () { var select = document.getElementById("select") var btn = document.getElementById("btn") btn.onclick = function () { //通过下标可以把jquery对象转换为javascript对象 try { //普通浏览器和ie8以上版本执行以下代码 select.add(new Option('2.5'), select.options[2]) } catch (err) { //ie7执行以下代码 select.add(new Option('2.5'), 2) } } } </script> </head> <body> <select id="select" multiple="multiple" size="5"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> </select> <div> <button type="button" id="btn">Click me!</button> </div> </body> </html>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset="UTF-8">
            <script type="text/javascript">
                //try{先执行的代码} catch(err){出错时执行的代码}
                //select的add方法,第一个参数是需要被添加的option元素,第二个参数决定了被添加的位置
                //普通浏览器中,第二个参数是一个既有的option对象,添加的option元素被插入到它之前.
                //ie7浏览器中,第二个参数是一个索引,表示第n个既有的option对象.
                //ie8以上版本,传入两种对象它都能识别.
                //如果没有第二个参数,则插入在最后.
                //对于普通浏览器,如果传入的是索引数值,它不会认为是出错,还是会添加在最后,所以,使用try{}catch{}方法解决这个问题,必须把普通浏览器的适用方法放在try里面.
                window.onload = function () {
                    var select = document.getElementById("select")
                    var btn = document.getElementById("btn")
                    btn.onclick = function () {
                        //通过下标可以把jquery对象转换为javascript对象
                        try {    //普通浏览器和ie8以上版本执行以下代码
                            select.add(new Option('2.5'), select.options[2])
                        } catch (err) {   //ie7执行以下代码
                            select.add(new Option('2.5'), 2)
                        }
                    }
                }
            </script>
        </head>
     
        <body>
            <select id="select" multiple="multiple" size="5">
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
                <option value="4">Four</option>
            </select>
            <div>
                <button type="button" id="btn">Click me!</button>
            </div>
        </body>
    </html>

    var mySelect = document.createElement("select");
              mySelect.id = "mySelect";
              document.body.appendChild(mySelect);
          }

    var e = document.getElementById("selectId");
    e. options= new Option("文本","值") ;
    //创建一个option对象,即在<select>标签中创建一个或多个<option value="值">文本</option>
    //options是个数组,里面可以存放多个<option value="值">文本</option>这样的标签

    function getvalue(obj)
    {
    var m=obj.options[obj.selectedIndex].value
    alert(m);//获取value
    var n=obj.options[obj.selectedIndex].text
    alert(n);//获取文本
    }

    <select id="mySelect">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
    </select>

    3. 使用document.createElement与appendChild。

    这是标准DOM API,基本上无所不能。 在以前的IE4中, document只能创建img, area, option三种元素,到了IE5,一般可以编程创建几乎所以元素, 除了frame和iframe。 而且这些新的创建的元素的属性都是可读写的,并且可以编程随意访问。但是你必须得先把他们先回到他们相应的集合中或者当前文档中你才能使用, 否则会报错。

    看下一个课题,如何找到可以提交的option元素。因为决定一个option能否提交,除了selected属性外,还有disabled属性,由于disabled属性可能出现在select或optgroup元素上,这问题就复杂了。此外selectedOptions数组属性并不可靠,不是所有浏览器都支持。jQuery在处理这里也花了不少代码。

    JavaScript

    var valHooks = { "option:get": function (node) { // 见上 }, "select:get": function (node, value) { var option, options = node.options, index = node.selectedIndex, getter = valHooks["option:get"], one = node.type === "select-one" || index < 0, values = one ? null : [], max = one ? index 1 : options.length, i = index < 0 ? max : one ? index : 0 for (; i < max; i ) { option = options[i] //IE6-9在reset后不会改变selected,需要改用i === index判定 //我们过滤所有disabled的option元素,但在safari5下, //如果设置optgroup为disable,那么其所有孩子都disable //因此当一个元素为disable,需要检测其是否显式设置了disable及其父节点的disable情况 if ((option.selected || i === index) && !option.disabled && (!option.parentNode.disabled || option.parentNode.tagName !== "OPTGROUP") ) { value = getter(option) if (one) { return value } //收集所有selected值组成数组返回 values.push(value) } } return values } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    var valHooks = {
        "option:get":  function (node) {
            // 见上
        },
        "select:get": function (node, value) {
            var option, options = node.options,
                    index = node.selectedIndex,
                    getter = valHooks["option:get"],
                    one = node.type === "select-one" || index < 0,
                    values = one ? null : [],
                    max = one ? index 1 : options.length,
                    i = index < 0 ? max : one ? index : 0
            for (; i < max; i ) {
                option = options[i]
                //IE6-9在reset后不会改变selected,需要改用i === index判定
                //我们过滤所有disabled的option元素,但在safari5下,
                //如果设置optgroup为disable,那么其所有孩子都disable
                //因此当一个元素为disable,需要检测其是否显式设置了disable及其父节点的disable情况
                if ((option.selected || i === index) && !option.disabled
                        && (!option.parentNode.disabled || option.parentNode.tagName !== "OPTGROUP")
                        ) {
                    value = getter(option)
                    if (one) {
                        return value
                    }
                    //收集所有selected值组成数组返回
                    values.push(value)
                }
            }
            return values
        }
    }

    option还有两个重要的属性,index是返回当前option元素在此select下所有option元素的位置。label是显示其文本,行为有点像text,优化级比text高,但有点兼容性问题。

    JavaScript

    <select id="test"> <option label="Label1">TextContent1</option> <option label="Label2">TextContent2</option> </select>

    1
    2
    3
    4
    <select id="test">
       <option label="Label1">TextContent1</option>
       <option label="Label2">TextContent2</option>
    </select>

    通常情况下,IE,opera,safari是显示Label1与Label2,而chrome, firefox(即使是4.01的版本)是显示TextContent1与TextContent2,这个古老的bug(见这里) 至今没修复。

    1 赞 5 收藏 评论

    新葡亰496net 3

    2.添加选项option

    1:options[ ]数组的属性:
    length属性---------长度属性
    selectedIndex属性--------当前被选中的框中的文本的索引值,此索引值是内存自动分配的(0,1,2,3.....)对应(第一个文本值,第二个文本值,第三个文本值,第四个文本值..........)
    2:单个option的属性(---obj.options[obj.selecedIndex]是指定的某个<option>标签,是一个---)
    text属性---------返回/指定 文本
    value属性------返回/指定 值,与<options value="...">一致。
    index属性-------返回下标,
    selected 属性-------返回/指定该对象是否被选中.通过指定 true 或者 false,可以动态的改变选中项
    defaultSelected 属性-----返回该对象默认是否被选中。true / false。
    3:option的方法
    增加一个<option>标签-----obj.options.add(new("文本","值"));<增>
    删除一个<option>标签-----obj.options.remove(obj.selectedIndex)<删>
    获得一个<option>标签的文本-----obj.options[obj.selectedIndex].text<查>
    修改一个<option>标签的值-----obj.options[obj.selectedIndex]=new Option("新文本","新值")<改>
    删除所有<option>标签-----obj.options.length = 0
    获得一个<option>标签的值-----obj.options[obj.selectedIndex].value
    注意:
    a:上面的写的是如这样类型的方法obj.options.function()而不写obj.funciton,是因为为了考虑在IE和FF 下的兼容,如obj.add()只能在IE中有效.
    b:obj.option中的option不需要大写,new Option中的Option需要大写
    二 、应用

    =======================================
    1 检测是否有选中

    则可通过以下script代码s来获取选中的value和text

         function addOption(){

    复制代码 代码如下:

    复制代码 代码如下:

    复制代码 代码如下:

              //根据id查找对象,
               var obj=document.getElementById('mySelect');

    <html>
    <head>
    <script language="javascript">
    function number(){
    var obj = document.getElementById("mySelect");
    //obj.options[obj.selectedIndex] = new Option("我的吃吃","4");//在当前选中的那个的值中改变
    //obj.options.add(new Option("我的吃吃","4"));再添加一个option
    //alert(obj.selectedIndex);//显示序号,option自己设置的
    //obj.options[obj.selectedIndex].text = "我的吃吃";更改值
    //obj.remove(obj.selectedIndex);删除功能
    }
    </script>
    </head>
    <body>
    <select id="mySelect">
    <option>我的包包</option>
    <option>我的本本</option>
    <option>我的油油</option>
    <option>我的担子</option>
    </select>
    <input type="button" name="button" value="查看结果" onclick="number();">
    </body>
    </html>

    if (objSelect.selectedIndex > - 1 ) {
    // 说明选中
    } else {
    // 说明没有选中
    }

    $("#mySelect").val(); //获取选中记录的value值
    $("#mySelect option:selected").text(); //获取选中记录的text值

               //添加一个选项
    obj.add(new Option("文本","值"));    //这个只能在IE中有效
             obj.options.add(new Option("text","value")); //这个兼容IE与firefox
         }

    1.动态创建select

    2 删除被选中的项
    objSelect.options[objSelect.selectedIndex] = null ;
    3 增加项
    objSelect.options[objSelect.length] = new Option( " 你好 " , " hello " );
    4 修改所选择中的项
    objSelect.options[objSelect.selectedIndex] = new Option( " 你好 " , " hello " );
    5 得到所选择项的文本
    objSelect.options[objSelect.selectedIndex].text;
    6 得到所选择项的值

    2、运用new Option("文本","值")方法添加选项option

    3.删除所有选项option

    复制代码 代码如下:

    objSelect.options[objSelect.selectedIndex].value;

    复制代码 代码如下:

    <%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
    <html xmlns=";
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>JS对select动态添加options操作[IE和FireFox兼容]</title>
    <script language="javascript" type="text/javascript">
    function xlbchange(s){
    switch (s){
    case "1" :
    document.getElementById("lb").options.length=0;
    var soojs_value=[0,1,2,3];
    var soojs_text=["精神提炼","作风设计","目标设置","理念提升"];
    for ( var i=0;i<soojs_value.length;i ){
    var oOption = document.createElement("OPTION");
    oOption.value=soojs_value[i];
    oOption.text=soojs_text[i];
    zpmange.lb.options.add(oOption);
    }
    break;
    case "2" :
    document.getElementById("lb").options.length=0;
    var soojs_value=[0,1,2,3,4,5,6,7];
    var soojs_text=["校徽","校训","校歌","校名字体","校史展室","宣传画册","宣传光盘","办公用品纪念品"];
    for ( var i=0;i<soojs_value.length;i ){
    var oOption = document.createElement("OPTION");
    oOption.value=soojs_value[i];
    oOption.text=soojs_text[i];
    zpmange.lb.options.add(oOption);
    }
    break;
    case "3":
    document.getElementById("lb").options.length=0;
    var soojs_value=[0,1,2,3];
    var soojs_text=["校园景观设计","校园雕塑设计","校园浮雕设计","走廊文化设计"];
    for ( var i=0;i<soojs_value.length;i ){
    var oOption = document.createElement("OPTION");
    oOption.value=soojs_value[i];
    oOption.text=soojs_text[i];
    zpmange.lb.options.add(oOption);
    }
    break;
    case "4":
    document.getElementById("lb").options.length=0;
    var soojs_value=[0,1,2];
    var soojs_text=["学校制度","文化活动","行为规范"];
    for ( var i=0;i<soojs_value.length;i ){
    var oOption = document.createElement("OPTION");
    oOption.value=soojs_value[i];
    oOption.text=soojs_text[i];
    zpmange.lb.options.add(oOption);
    }
    break;
    default :
    document.getElementById("lb").options.length=0;
    var oOption = document.createElement("OPTION");
    oOption.value=0;
    oOption.text="请选择作品类别";
    zpmange.lb.options.add(oOption);
    }
    }
    </script>
    </head>
    <body>
    <form action="zpmange.asp" name="zpmange" method="post">
    <p><select id="ddlResourceType" onchange="getvalue(this)"><br />
    </select></p>
    <p> 动态删除select中的所有options: <br />
    document.getElementById("ddlResourceType").options.length=0; <br />
    <br />
    动态删除select中的某一项option: <br />
    document.getElementById("ddlResourceType").options.remove(indx); </p>
    <p> 动态添加select中的项option: <br />
    document.getElementById("ddlResourceType").options.add(new Option(text,value)); </p>
    <p> 上面在IE和FireFox都能测试成功,希望以后你可以用上。 <br />
    其实用标准的DOM操作也可以,就是document.createElement,appendChild,removeChild之类的。 </p>
    <p>取值方面<br />
    function getvalue(obj)<br />
    {<br />
    var m=obj.options[obj.selectedIndex].value<br />
    alert(m);//获取value<br />
    var n=obj.options[obj.selectedIndex].text<br />
    alert(n);//获取文本<br />
    }<br />
    </p>
    <p>例子:</p>
    <table width="80%" border="0" align="center" cellpadding="1" cellspacing="1" style="border-style:double">
    <tr>
    <td width="50%" height="41" ><div align="center">
    <select name="xt" id="xt" onchange="xlbchange(this.value)">
    <option selected="selected">请选择作品系统</option>
    <option value="1">理念视别系统</option>
    <option value="2">视觉识别系统</option>
    <option value="3">环境视别系统</option>
    <option value="4">行为视别系统</option>
    </select>
    </div></td>
    <td width="61%" ><div align="center">
    <select name="lb" id="lb">
    <option selected="selected">请选择作品类别</option>
    </select>
    </div></td>
    </tr>
    <tr>
    <td height="203" colspan="2" > </td>
    </tr>
    </table>
    </form>
    </body>
    </html>

    复制代码 代码如下:

         function removeAll(){
               var obj=document.getElementById('mySelect');
    obj.options.length=0;

    function createSelect(){
    var mySelect = document.createElement("select");
    mySelect.id = "mySelect";
    document.body.appendChild(mySelect);
    }

    您可能感兴趣的文章:

    • JavaScript操作select元素和option的实例代码
    • javascript操作select元素实例分析
    • 获取select元素被选中的文本内容的js代码
    • js querySelector和getElementById通过id获取元素的区别
    • js获取当前select 元素值的代码
    • js 获取当前select元素值的代码
    • JavaScript Select和Option列表元素上下左右移动
    • extjs 列表框(multiselect)的动态添加列表项的方法
    • JS对HTML标签select的获取、添加、删除操作
    • JavaScript实现将数组数据添加到Select下拉框的方法
    • JS动态添加与删除select中的Option对象(示例代码)
    • JS & JQuery 动态添加 select option
    • JavaScript实现向select下拉框中添加和删除元素的方法

    var obj = document.getElementById("mySelect");obj.add(new Option("4","4"));

         }

    2.添加选项option

    3、删除所有选项option

    4.删除一个选项option

    复制代码 代码如下:

    复制代码 代码如下:

    function removeOne(){
               var obj=document.getElementById('mySelect');

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

    var obj = document.getElementById("mySelect");obj.options.length = 0;

               //index,要删除选项的序号,这里取当前选中选项的序号

    3.删除所有选项option

    4、删除选中选项option

    var index=obj.selectedIndex;
    obj.options.remove(index);

         }

    复制代码 代码如下:

    复制代码 代码如下:

    5.获得选项option的值

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

    var obj = document.getElementById("mySelect");var index = obj.selectedIndex;obj.options.remove(index);

    var obj=document.getElementById('mySelect');

    4.删除一个选项option

    5、修改选中选项option

    var index=obj.selectedIndex; //序号,取当前选中选项的序号

    复制代码 代码如下:

    复制代码 代码如下:

    var val = obj.options[index].value;

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

    var obj = document.getElementById("mySelect");
    var index = obj.selectedIndex;
    obj.options[index] = new Option("three",3); //更改对应的值
    obj.options[index].selected = true; //保持选中状态

    6.获得选项option的文本

    5.获得选项option的值

    6、删除select

    var obj=document.getElementById('mySelect');

    复制代码 代码如下:

    复制代码 代码如下:

    var index=obj.selectedIndex; //序号,取当前选中选项的序号

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

    var obj = document.getElementById("mySelect");
    obj.parentNode.removeChild(obj); //移除当前对象

    var val = obj.options[index].text;

    6.获得选项option的文本

    7、select选择的响应事件

    7.修改选项option

    复制代码 代码如下:

    复制代码 代码如下:

    var obj=document.getElementById('mySelect');

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

    $("#mySelect").change(function(){ //添加所需要执行的操作代码})

    var index=obj.selectedIndex; //序号,取当前选中选项的序号

    7.修改选项option

    1.动态创建select

    var val = obj.options[index]=new Option("新文本","新值");

    复制代码 代码如下:

    复制代码 代码如下:

    8.删除select

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

    function createSelect(){
    var mySelect = document.createElement_x("select");
    mySelect.id = "mySelect";
    document.body.appendChild(mySelect);
    }

          function removeSelect(){
                var mySelect = document.getElementById("mySelect");
    mySelect.parentNode.removeChild(mySelect);
         }

    8.删除select

    2.添加选项option

    整个实例的完整代码如下:

    复制代码 代码如下:

    复制代码 代码如下:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "">
    <html>
    <head>
       <meta http-equiv="Content-Type" content="text/html">
    <head>
       <script language=JavaScript>
        function $(id)
        {
         return document.getElementById(id)
        }
        function show()
        {
         var selectObj=$("area")
         var myOption=document.createElement("option")
         myOption.setAttribute("value","10")
         myOption.appendChild(document.createTextNode("上海"))
         var myOption1=document.createElement("option")
         myOption1.setAttribute("value","100")
         myOption1.appendChild(document.createTextNode("南京"))
         selectObj.appendChild(myOption)
         selectObj.appendChild(myOption1)
        }
        function choice()
        {
         var index=$("area").selectedIndex;
         var val=$("area").options[index].getAttribute("value")
         if(val==10)
         {
          var i=$("context").childNodes.length-1;
         var remobj=$("context").childNodes[i];
         remobj.removeNode(true)
          var sh=document.createElement("select")
          sh.add(new Option("浦东新区","101"))
          sh.add(new Option("黄浦区","102"))
          sh.add(new Option("徐汇区","103"))
          sh.add(new Option("普陀区","104"))
          $("context").appendChild(sh)
         }
         if(val==100)
         {
          var i=$("context").childNodes.length-1;
         var remobj=$("context").childNodes[i];
         remobj.removeNode(true)
          var nj=document.createElement("select")
          nj.add(new Option("玄武区","201"))
          nj.add(new Option("白下区","202"))
          nj.add(new Option("下关区","203"))
          nj.add(new Option("栖霞区","204"))
          $("context").appendChild(nj)
         }
        }
        function calc()
        {
         var x=$("context").childNodes.length-1;
         alert(x)
        }
        function remove()
        {
         var i=$("context").childNodes.length-1;
         var remobj=$("context").childNodes[i];
         remobj.removeNode(true)
        }
       </script>
    <body>
    <div id="context">
       <select id="area" onchange="choice()">
       </select>
    </div>
    <input type=button value="显示" onclick="show()">
    <input type=button value="计算结点" onclick="calc()">
    <input type=button value="删除" onclick="remove()">
    </body>
    </html>

    function removeSelect(){
    var mySelect = document.getElementById("mySelect");
    mySelect.parentNode.removeChild(mySelect);
    }
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" ";
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html">
    <head>
    <script language=JavaScript>
    function $(id)
    {
    return document.getElementById(id)
    }
    function show()
    {
    var selectObj=$("area")
    var myOption=document.createElement("option")
    myOption.setAttribute("value","10")
    myOption.appendChild(document.createTextNode("上海"))
    var myOption1=document.createElement("option")
    myOption1.setAttribute("value","100")
    myOption1.appendChild(document.createTextNode("南京"))
    selectObj.appendChild(myOption)
    selectObj.appendChild(myOption1)
    }
    function choice()
    {
    var index=$("area").selectedIndex;
    var val=$("area").options[index].getAttribute("value")
    if(val==10)
    {
    var i=$("context").childNodes.length-1;
    var remobj=$("context").childNodes[i];
    remobj.removeNode(true)
    var sh=document.createElement("select")
    sh.add(new Option("浦东新区","101"))
    sh.add(new Option("黄浦区","102"))
    sh.add(new Option("徐汇区","103"))
    sh.add(new Option("普陀区","104"))
    $("context").appendChild(sh)
    }
    if(val==100)
    {
    var i=$("context").childNodes.length-1;
    var remobj=$("context").childNodes[i];
    remobj.removeNode(true)
    var nj=document.createElement("select")
    nj.add(new Option("玄武区","201"))
    nj.add(new Option("白下区","202"))
    nj.add(new Option("下关区","203"))
    nj.add(new Option("栖霞区","204"))
    $("context").appendChild(nj)
    }
    }
    function calc()
    {
    var x=$("context").childNodes.length-1;
    alert(x)
    }
    function remove()
    {
    var i=$("context").childNodes.length-1;
    var remobj=$("context").childNodes[i];
    remobj.removeNode(true)
    }
    </script>
    <body><div id="context">
    <select id="area" on
    change="choice()">
    </select>
    </div>
    <input type=button value="显示" onclick="show()">
    <input type=button value="计算结点" onclick="calc()">
    <input type=button value="删除" onclick="remove()">
    </body>
    </html>

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

    改进版:在select中添加、修改、删除option元素

    根据这些东西,自己用JQEURY AJAX JSON实现了一个小功能如下:
    JS代码:(只取了于SELECT相关的代码)

    3.删除所有选项option

    function watch_ini(){ // 初始
    for(var i=0; i<arguments.length; i ){
    var word = document.createElement("OPTION");
    word.text = arguments[i];
    watch.keywords.add(word); // watch. is form name
    }
    }
    function watch_add(f){ // 增加
    var word = document.createElement("OPTION");
    word.text = f.word.value;
    f.keywords.add(word);
    }
    但上述 add() 方法只在IE下有效,为兼容FF和Opera,对上述代码进行了一下改进,改动后代码如下: function watch_ini(){ // 初始
    for(var i=0; i<arguments.length; i ){
       var oOption=new Option(arguments[i],arguments[i]);
       document.getElementById("MySelect")[i]=oOption;
    }
    }
    function watch_add(f){ // 增加
       var oOption=new Option(f.word.value,f.word.value);
       f.keywords[f.keywords.length]=oOption;
    }

    复制代码 代码如下:

    复制代码 代码如下:

    整个实例的完整代码如下:

    /**
    * @description 构件联动下拉列表 (用JQUERY 的AJAX配合JSON实现)
    * @prarm selectId 下拉列表的ID
    * @prarm method 要调用的方法名称
    * @prarm temp 此处存放软件ID
    * @prarm url 要跳转的地址
    */
    function linkAgeJson(selectId,method,temp,url){
    $j.ajax({
    type: "get",//使用get方法访问后台
    dataType: "json",//返回json格式的数据
    url: url,//要访问的后台地址
    新葡亰496net:操作select和option常用代码整理,表单成分之下拉系。data: "method=" method "&temp=" temp,//要发送的数据
    success: function(msg){//msg为返回的数据,在这里做数据绑定
    var data = msg.lists;
    coverJsonToHtml(selectId,data);
    }
    });
    }
    /**
    * @description 将JSON数据转换成HTML数据格式
    * @prarm selectId 下拉列表的ID
    * @prarm nodeArray 返回的JSON数组
    *
    */
    function coverJsonToHtml(selectId,nodeArray){
    //get select
    var tempSelect=$j("#" selectId);
    //clear select value
    isClearSelect(selectId,'0');
    var tempOption=null;
    for(var i=0;i<nodeArray.length;i ){
    //create select Option
    tempOption= $j('<option value="' nodeArray[i].dm '">' nodeArray[i].mc '</option> ');
    //put Option to select
    tempSelect.append(tempOption);
    }
    // 获取退化构件列表
    getCpgjThgl(selectId,'thgjDm');
    }
    /**
    * @description 清空下拉列表的值
    * @prarm selectId 下拉列表的ID
    * @prarm index 开始清空的下标位置
    */
    function isClearSelect(selectId,index){
    var length=document.getElementById(selectId).options.length;
    while(length!=index){
    //长度是在变化的,因为必须重新获取
    length=document.getElementById(selectId).options.length;
    for(var i=index;i<length;i )
    document.getElementById(selectId).options.remove(i);
    length=length/2;
    }
    }
    /**
    * @description 获取退化构件列表
    * @prarm selectId1 引用软件下拉列表的ID
    * @prarm selectId2 退化构件下拉列表的ID
    */
    function getCpgjThgl(selectId1,selectId2){
    var obj1=document.getElementById(selectId1);//引用软件下拉列表
    var obj2=document.getElementById(selectId2);//退化构件下拉列表
    var len=obj1.options.length;
    //当引用软件列表长度等于1时返回,不做操作
    if(len==1){
    return false;
    新葡亰496net:操作select和option常用代码整理,表单成分之下拉系。}
    //清空下拉列表的值,两种方式都可以
    // isClearSelect(selectId2,'1');
    document.getElementById(selectId2).length=1;
    for(var i=0;i<len; i ){
    var option= obj1.options[i];
    //引用软件被选中项不加入
    if(i!=obj1.selectedIndex){
    //克隆OPTION并添加到SELECT中
    obj2.appendChild(option.cloneNode(true));
    }
    }
    }

    function removeAll(){
    var obj=document.getElementByIdx_x('mySelect');
    obj.options.length=0;
    }

    <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
    <html>
    <head>
    <title>javascript select options text value</title>
    <meta name="keywords" content="javascript select options text value add modify delete set">
    <meta name="description" content="javascript select options text value add modify delete set">
    <script language="javascript">
    <!--
    function watch_ini(){ // 初始
    for(var i=0; i<arguments.length; i ){
       var oOption=new Option(arguments[i],arguments[i]);
       document.getElementById("MySelect")[i]=oOption;
    }
    }
    function watch_add(f){ // 增加
       var oOption=new Option(f.word.value,f.word.value);
       f.keywords[f.keywords.length]=oOption;
    }
    function watch_sel(f){ // 编辑
    f.word.value = f.keywords[f.keywords.selectedIndex].text;
    }
    function watch_mod(f){ // 修改
    f.keywords[f.keywords.selectedIndex].text = f.word.value;
    }
    function watch_del(f){ // 删除
    f.keywords.remove(f.keywords.selectedIndex);
    }
    function watch_set(f){ // 保存
    var set = "";
    for(var i=0; i<f.keywords.length; i ){
    set = f.keywords[i].text ";";
    }
    confirm(set);
    }
    //-->
    </script>
    </head>
    <body>
    <form name="watch" method="post" action="">
    <select id="MySelect" name="keywords" size="10" onchange="watch_sel(this.form)"></select><br>
    <script language="javascript">
    <!--
    watch_ini("我","你","妳","他","她","它","尔"); // 初始关键词
    //-->
    </script>
    <input type="text" name="word" /><br />
    <input type="button" value="增加" onclick="watch_add(this.form);" />
    <input type="button" value="修改" onclick="watch_mod(this.form);" />
    <input type="button" value="删除" onclick="watch_del(this.form);" />
    <input type="button" value="保存" onclick="watch_set(this.form);" />
    </form>

    HTML代码:

    4.删除一个选项option

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

    复制代码 代码如下:

    复制代码 代码如下:

    <script language="javascript">   

    <TABLE width="100%" border=0 align="left" cellPadding=0 cellSpacing=1>
    <tr>
    <td class="Search_item_18"> <span class="Edit_mustinput">*</span>引用软件:</td>
    <td class="Search_content_82">
    <input name="yyrjMc" id="yyrjMc" type="text" class="Search_input" tabindex="3" size="30" >
    <input name="yyrjDm" id="yyrjDm" type="hidden" >
    <input type="button" class="Search_button_select"
    onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="选择...">
    </td>
    </tr>
    <tr>
    <td class="Search_item"> <span class="Edit_mustinput">*</span>引用分版:</td>
    <td class="Search_content" id="yyfb">
    <select name="yyfbDm" style="width:160" id="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')">
    </select>
    </td>
    </tr>
    <tr>
    <td class="Search_item">退化构件:</td>
    <td class="Search_content" id="thgj">
    <select name="thgjDm" style="width:160" id="thgjDm">
    <option value="-1" selected>无</option>
    </select>
    </td>
    </tr>
    </TABLE>

    function removeOne(){
    var obj=document.getElementByIdx_x('mySelect');
    //index,要删除选项的序号,这里取当前选中选项的序号
    var index=obj.selectedIndex;
    obj.options.remove(index);
    }

    </body>
    </html> <script>functionspli(){datastr="2,2,3,5,6,6";      varstr=newArray();       str=datastr.split(",");          for(i=0;i<str.length ;i )        {document.write(str[i] "<br/>");  }   }   spli();   </script>   -- 来源于互联网

    javascript对它们的操作 一、基础理解 复制代码 代码如下: var e = document.getElementById("sel...

    5.获得选项option的值

     

    复制代码 代码如下:

     

    var obj=document.getElementByIdx_x('mySelect');
    var index=obj.selectedIndex; //序号,取当前选中选项的序号
    var val = obj.options[index].value;

    6.获得选项option的文本

    <select id="ddlResourceType" onchange="getvalue(this)">

    复制代码 代码如下:

    </select>

    var obj=document.getElementByIdx_x('mySelect');
    var index=obj.selectedIndex; //序号,取当前选中选项的序号
    var val = obj.options[index].text;

        动态删除select中的所有options:

    7.修改选项option

           document.getElementById("ddlResourceType").options.length=0;

    复制代码 代码如下:

         动态删除select中的某一项option:

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

           document.getElementById("ddlResourceType").options.remove(indx); 

    8.删除select

         动态添加select中的项option:

    复制代码 代码如下:

           document.getElementById("ddlResourceType").options.add(new Option(text,value));

    function removeSelect(){
    var mySelect = document.getElementByIdx_x("mySelect");
    mySelect.parentNode.removeChild(mySelect);
    }

         上面在IE和FireFox都能测试成功,希望以后你可以用上。

    整个实例的完整代码如下

    其实用标准的DOM操作也可以,就是document.createElement,appendChild,removeChild之类的。

    复制代码 代码如下:

    取值方面

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" ";
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html">
    <head>
    <script language=JavaScript>
    function $(id)
    {
    return document.getElementByIdx_x(id)
    }
    function show()
    {
    var selectObj=$("area")
    var myOption=document.createElement_x("option")
    myOption.setAttribute("value","10")
    myOption.appendChild(document.createTextNode("上海"))
    var myOption1=document.createElement_x("option")
    myOption1.setAttribute("value","100")
    myOption1.appendChild(document.createTextNode("南京"))
    selectObj.appendChild(myOption)
    selectObj.appendChild(myOption1)
    }
    function choice()
    {
    var index=$("area").selectedIndex;
    var val=$("area").options[index].getAttribute("value")
    if(val==10)
    {
    var i=$("context").childNodes.length-1;
    var remobj=$("context").childNodes[i];
    remobj.removeNode(true)
    var sh=document.createElement_x("select")
    sh.add(new Option("浦东新区","101"))
    sh.add(new Option("黄浦区","102"))
    sh.add(new Option("徐汇区","103"))
    sh.add(new Option("普陀区","104"))
    $("context").appendChild(sh)
    }
    if(val==100)
    {
    var i=$("context").childNodes.length-1;
    var remobj=$("context").childNodes[i];
    remobj.removeNode(true)
    var nj=document.createElement_x("select")
    nj.add(new Option("玄武区","201"))
    nj.add(new Option("白下区","202"))
    nj.add(new Option("下关区","203"))
    nj.add(new Option("栖霞区","204"))
    $("context").appendChild(nj)
    }
    }
    function calc()
    {
    var x=$("context").childNodes.length-1;
    alert(x)
    }
    function remove()
    {
    var i=$("context").childNodes.length-1;
    var remobj=$("context").childNodes[i];
    remobj.removeNode(true)
    }
    </script>
    <body>
    <div id="context">
    <select id="area" onchange="choice()">
    </select>
    </div>
    <input type=button value="显示" onclick="show()">
    <input type=button value="计算结点" onclick="calc()">
    <input type=button value="删除" onclick="remove()">
    </body>
    </html>

        function getvalue(obj)

    改进版:在select中添加、修改、删除option元素

        {

    复制代码 代码如下:

            var m=obj.options[obj.selectedIndex].value

    function watch_ini(){ // 初始
    for(var i=0; i<arguments.length; i ){
    var word = document.createElement_x("OPTION");
    word.text = arguments[i];
    watch.keywords.add(word); // watch. is form name
    }
    }
    function watch_add(f){ // 增加
    var word = document.createElement_x("OPTION");
    word.text = f.word.value;
    f.keywords.add(word);
    }

            alert(m);//获取value

    但上述 add() 方法只在IE下有效,为兼容FF和Opera,对上述代码进行了一下改进,改动后代码如下:

            var n=obj.options[obj.selectedIndex].text

    复制代码 代码如下:

            alert(n);//获取文本

    function watch_ini(){ // 初始
    for(var i=0; i<arguments.length; i ){
    var oOption=new Option(arguments[i],arguments[i]);
    document.getElementByIdx_x("MySelect")[i]=oOption;
    }
    }
    function watch_add(f){ // 增加
    var oOption=new Option(f.word.value,f.word.value);
    f.keywords[f.keywords.length]=oOption;
    }

        }

    整个实例的完整代码如下

    ==============================================================================

    复制代码 代码如下:

    1 检测是否有选中

    <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
    <html>
    <head>
    <title>javascript select options text value</title>
    <meta name="keywords" content="javascript select options text value add modify delete set">
    <meta name="description" content="javascript select options text value add modify delete set">
    <script language="javascript">
    <!--
    function watch_ini(){ // 初始
    for(var i=0; i<arguments.length; i ){
    var oOption=new Option(arguments[i],arguments[i]);
    document.getElementByIdx_x("MySelect")[i]=oOption;
    }
    }
    function watch_add(f){ // 增加
    var oOption=new Option(f.word.value,f.word.value);
    f.keywords[f.keywords.length]=oOption;
    }
    function watch_sel(f){ // 编辑
    f.word.value = f.keywords[f.keywords.selectedIndex].text;
    }
    function watch_mod(f){ // 修改
    f.keywords[f.keywords.selectedIndex].text = f.word.value;
    }
    function watch_del(f){ // 删除
    f.keywords.remove(f.keywords.selectedIndex);
    }
    function watch_set(f){ // 保存
    var set = "";
    for(var i=0; i<f.keywords.length; i ){
    set = f.keywords[i].text ";";
    }
    confirm(set);
    }
    //-->
    </script>
    </head>
    <body>
    <form name="watch" method="post" action="">
    <select id="MySelect" name="keywords" size="10" onchange="watch_sel(this.form)"></select><br>
    <script language="javascript">
    <!--
    watch_ini("我","你","妳","他","她","它","尔"); // 初始关键词
    //-->
    </script>
    <input type="text" name="word" /><br />
    <input type="button" value="增加" onclick="watch_add(this.form);" />
    <input type="button" value="修改" onclick="watch_mod(this.form);" />
    <input type="button" value="删除" onclick="watch_del(this.form);" />
    <input type="button" value="保存" onclick="watch_set(this.form);" />
    </form>

    if (objSelect.selectedIndex > - 1 ) {

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

    // 说明选中

    复制代码 代码如下:

    } else {

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

    // 说明没有选中

    今天调试了一段js,在ie上运行良好,在火狐上调试出现错误,查资料发现

    }

    复制代码 代码如下:

    2 删除被选中的项

    obj.add(new Option("文本","值")); //这个只能在IE中有效
    obj.options.add(new Option("text","value")); //这个兼容IE与firefox

    objSelect.options[objSelect.selectedIndex] = null ;

    因为这段代码,在网上查资料收藏了这篇文章,实时的温故js
    共勉!

    3 增加项

    您可能感兴趣的文章:

    • javascript Select标记中options操作方法集合
    • JS & JQuery 动态添加 select option
    • js select option对象小结
    • JS获取select-option-text_value的方法
    • javascript对select标签的控制(option选项/select)
    • JS更改select内option属性的方法
    • javascript据option的value值快速设定初始的selected选项
    • js添加select下默认的option的value和text的方法
    • js获取select选中的option的text示例代码
    • js获取select默认选中的Option并不是当前选中值
    • JS实现select选中option触发事件操作示例

    objSelect.options[objSelect.length] = new Option( " 你好 " , " hello " );

    4 修改所选择中的项

    objSelect.options[objSelect.selectedIndex] = new Option( " 你好 " , " hello " );

    5 得到所选择项的文本

    objSelect.options[objSelect.selectedIndex].text;

    6 得到所选择项的值

    objSelect.options[objSelect.selectedIndex].value;

    ======================================================================

    <%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";

    <html xmlns=";

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <title>JS对select动态添加options操作[IE和FireFox兼容]</title>

    <script language="javascript" type="text/javascript">

    function xlbchange(s){

    switch (s){

       case "1" :

           document.getElementById("lb").options.length=0;

         var soojs_value=[0,1,2,3];

        var soojs_text=["精神提炼","作风设计","目标设置","理念提升"];

        for ( var i=0;i<soojs_value.length;i ){

         var   oOption   =   document.createElement("OPTION");  

         oOption.value=soojs_value[i];  

         oOption.text=soojs_text[i];  

         zpmange.lb.options.add(oOption);

         }

          break;

       case "2" :

           document.getElementById("lb").options.length=0;

         var soojs_value=[0,1,2,3,4,5,6,7];

        var soojs_text=["校徽","校训","校歌","校名字体","校史展室","宣传画册","宣传光盘","办公用品纪念品"];

        for ( var i=0;i<soojs_value.length;i ){

         var   oOption   =   document.createElement("OPTION");  

         oOption.value=soojs_value[i];  

         oOption.text=soojs_text[i];  

         zpmange.lb.options.add(oOption);

         }  

          break;

            case "3":

        document.getElementById("lb").options.length=0;

         var soojs_value=[0,1,2,3];

        var soojs_text=["校园景观设计","校园雕塑设计","校园浮雕设计","走廊文化设计"];

        for ( var i=0;i<soojs_value.length;i ){

         var   oOption   =   document.createElement("OPTION");  

         oOption.value=soojs_value[i];  

         oOption.text=soojs_text[i];  

         zpmange.lb.options.add(oOption);

         }

       break;   

            case "4":

        document.getElementById("lb").options.length=0;

         var soojs_value=[0,1,2];

        var soojs_text=["学校制度","文化活动","行为规范"];

        for ( var i=0;i<soojs_value.length;i ){

         var   oOption   =   document.createElement("OPTION");  

         oOption.value=soojs_value[i];  

         oOption.text=soojs_text[i];  

         zpmange.lb.options.add(oOption);

         }

       break;

    default :

       document.getElementById("lb").options.length=0;

    var   oOption   =   document.createElement("OPTION");

         oOption.value=0;  

         oOption.text="请选择作品类别";

    zpmange.lb.options.add(oOption);

    }

    }

    </script>

    </head>

    <body>

    <form action="zpmange.asp" name="zpmange" method="post">

    <p><select id="ddlResourceType" onchange="getvalue(this)"><br />

    </select></p>

    <p> 动态删除select中的所有options: <br />

        document.getElementById("ddlResourceType").options.length=0; <br />

    <br />

        动态删除select中的某一项option: <br />

        document.getElementById("ddlResourceType").options.remove(indx); </p>

    <p> 动态添加select中的项option: <br />

        document.getElementById("ddlResourceType").options.add(new Option(text,value)); </p>

    <p> 上面在IE和FireFox都能测试成功,希望以后你可以用上。 <br />

        其实用标准的DOM操作也可以,就是document.createElement,appendChild,removeChild之类的。 </p>

    <p>取值方面<br />

        function getvalue(obj)<br />

        {<br />

        var m=obj.options[obj.selectedIndex].value<br />

        alert(m);//获取value<br />

        var n=obj.options[obj.selectedIndex].text<br />

        alert(n);//获取文本<br />

        }<br />

    </p>

    <p>例子:</p>

    <table width="80%" border="0" align="center" cellpadding="1" cellspacing="1" style="border-style:double">

        <tr>

          <td width="50%" height="41" ><div align="center">

          

                <select name="xt" id="xt" onchange="xlbchange(this.value)">

              <option selected="selected">请选择作品系统</option>

                      <option value="1">理念视别系统</option>

                      <option value="2">视觉识别系统</option>

                      <option value="3">环境视别系统</option>

                      <option value="4">行为视别系统</option>         

            </select>

                   

          </div></td>

          <td width="61%" ><div align="center">

            <select name="lb" id="lb">

       <option selected="selected">请选择作品类别</option>

            </select>

          </div></td>

        </tr>

        <tr>

          <td height="203" colspan="2" > </td>

        </tr>

    </table>

    </form>

    </body>

    </html>

     

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net:操作select和option常用代码整理,表

    关键词: