`
mutongwu
  • 浏览: 448406 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

select,option 元素的DOM操作:

阅读更多
select 元素常用属性(方法):
    add(newOption, relOption) — 添加新的option元素在relOption元素之前。
    multiple — Boolean值。默认值为false,select 元素默认单选。
    remove(index) —  删除索引为index的option元素。
    selectedIndex — 选中的option元素的索引。如果是多选,则返回第一个option的索引。没有选中的元素返回-1.
    options — HTMLCollection 对象,包含select元素下的 option 元素。
    type —— 取值为 "select-one" 或 "select-multiple",表示它是单选或多选。

注意:关于selec元素的value值:
     a)如果没有元素选中,单选情况下,取第一个option的值,多选情况下值为空字符串。
     b)如果有多个元素选中,只返回第一个option的值。
     c)如果选中的option没有设置value,那么在IE6/7/8中,值为空字符串,在IE9+以及其他浏览器中,option的显示文本,将作为值返回。

// 示例
    <select name="location" id="selLocation" multiple>
        <option value="Sunnyvale, CA">Sunnyvale</option>
        <option value="Los Angeles, CA">Los Angeles</option>
        <option value="Mountain View, CA">Mountain View</option> // value: "Mountain View, CA"
        <option value="">China</option> // value: ""(空字符串)
        <option>Australia</option>  // value:"Australia"
    </select>

option元素的常用属性(方法):
    index — option在 select元素的options对象中的索引
    selected —  Boolean ,true表示被选中
    text — 显示的文本
    value — 值

//添加option元素:
    var newOption = new Option("Option text", "Option value");

    //这个调用在IE6/7/8下,无法正常运行。
    // selectbox.appendChild(newOption); 

    /* 改用以下方式:第二个参数(relOption)表示option添加在relOption之前,对于IE6/7/8是无效的,为了兼容,我们设置为undefined.
     其结果是 该option默认添加到最后。如果我们需要控制option的位置,可以利用 insertBefore() 方法。
    */
    selectbox.add(newOption, undefined); 

// 删除 option 元素:
    selectbox.removeChild(selectbox.options[0]);
OR:
    selectbox.remove(0); //remove first option

//修改option的位置

var optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index-1]);//调换了前2个option的位置。



//获取select元素选中的option值
function getSelectValue(selectbox){
    var result = new Array();
    var option = null;
    for (var i=0, len=selectbox.options.length; i < len; i++){
        optValue = null;
        option = selectbox.options[i];
        if (option.hasAttribute){
            optValue = (option.hasAttribute("value") ? option.value : option.text);
        } else {
            optValue = (option.attributes["value"].specified ? option.value : option.text);
        }
        result.push(optValue);
    }
    return result;
}

分享到:
评论

相关推荐

    JS动态添加Select中的Option元素值

    通过JavaScript的DOM操作,我们可以灵活地更新页面上的Select列表,从而提高用户体验。 此外,我们还可以通过监听事件,如按钮点击事件,来实现动态添加Option的功能。例如,当用户点击一个按钮时,弹出一个对话框...

    用jquery获取select标签中选中的option值及文本的示例

    1. 引入jQuery库:要使用jQuery操作DOM元素,必须先引入jQuery库。示例代码中在HTML的head部分通过script标签引入了外部的jQuery脚本库,路径是"../../../../js/common/jquery-1.6.2.js"。这是使用jQuery功能的前提...

    js实现动态生成select中的option

    在JavaScript中,我们可以通过DOM操作来创建和添加`option`元素。首先,我们需要一个数组来存储下拉列表的数据,这些数据可以是字符串,也可以是对象,取决于我们的具体需求。 以下是一个基本的步骤: 1. **准备...

    向元素中动态添加option

    在本案例中,`&lt;option&gt;`元素就是DOM的一部分,我们可以通过JavaScript的DOM操作方法来对其进行动态管理。 首先,创建一个新的`&lt;option&gt;`元素需要使用`document.createElement('option')`。然后,可以使用`....

    Jquery操作Select option整理

    jQuery作为一种流行的JavaScript库,极大地简化了DOM操作的过程,使得处理`&lt;select&gt;`元素变得简单高效。本文档汇总了一系列关于如何使用jQuery来操作`&lt;select&gt;`元素及其`&lt;option&gt;`子元素的方法,旨在为前端开发者...

    jquery获得select option值

    ### 六、操作DOM元素 1. **向下拉列表添加新选项**: ```javascript $("&lt;option value='1'&gt;1111&lt;/option&gt;&lt;option value='2'&gt;2222&lt;/option&gt;").appendTo("#sel"); ``` 使用jQuery可以方便地创建并添加新的`...

    [JavaScript]Javascript 设置与读取Co 三级select列表

    4. 更新DOM:清除第二级`&lt;select&gt;`的所有选项,然后为每个新的第二级选项创建`&lt;option&gt;`元素,并添加到`&lt;select&gt;`中。 5. 如果有第三级,重复步骤3和4,但这次针对第二级的`&lt;select&gt;`。 在实际项目中,可能还需要...

    jquery实现 两个select之间option的转移操作

    本文将深入探讨如何使用jQuery实现两个`&lt;select&gt;`元素之间的`&lt;option&gt;`选项转移操作,包括全选、单选以及删除功能。 首先,我们需要了解`&lt;select&gt;`和`&lt;option&gt;`的基本概念。`&lt;select&gt;`元素用于创建下拉列表,而`...

    js select option

    在JavaScript编程中,`select`元素和`option`标签是创建下拉列表的重要部分。`select`用于定义一个选择框,而`option`则用于在选择框中添加可选项。在网页交互中,用户通常会使用这样的下拉列表来从预设的选项中做出...

    select将选中的option设置为默认选项

    总之,通过JavaScript操作DOM,我们可以方便地在网页上动态设置`&lt;select&gt;`元素的默认选中项。这个功能在许多交互式应用场景中非常有用,比如用户配置、数据筛选等。在实际项目中,还可以结合事件监听器,如`change`...

    Jquery 操作 Dom 标签 select

    ### Jquery 操作 Dom 标签 Select 在前端开发中,使用 jQuery 操作 DOM 元素是非常常见的需求之一。特别是对于表单元素如 `select`、`radio` 和 `checkbox` 的操作,更是频繁出现。下面我们将详细介绍如何使用 ...

    Html dom中的select, option_ 级联下拉列表

    在HTML DOM中操作select和option时,可以使用诸如document.getElementById获取select元素,再利用add方法来添加option元素。 此外,创建元素时还需注意元素的样式如何被定义。在文中提到,要修改的样式必须是内联...

    JS更改select内option属性的方法

    本文详细介绍了如何使用JavaScript更改select元素内option的属性,包括更改选项文本、值等,并提供了一个实例来演示具体操作。 首先,要更改select内的option属性,需要获取select元素的DOM引用。这通常通过...

    jquery实现select互斥联动

    在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互。在本示例中,我们将探讨如何使用jQuery实现“select”元素的互斥联动效果,这是一种常见的表单控件交互设计,常用于...

    JQuery操作select

    在网页开发中,jQuery 是一个非常流行的 JavaScript 库,它提供了简洁、强大的API来操作DOM元素,包括对select这样的下拉列表的操作。本篇文章将详细讲解如何使用jQuery来操作select。 首先,`changeShipMethod`...

    select下拉列表显示图片内容

    可能是指使用jQuery来操作`select`元素,例如`$("#***").append('&lt;option&gt;&lt;img src="..."&gt;&lt;/option&gt;')`来添加带有图片的选项。但需要注意的是,原生的`&lt;option&gt;`标签不支持内联HTML,所以图片需要通过CSS背景图或者...

    Javascript Select操作大集合

    另一种方式是使用DOM操作,适用于所有现代浏览器,包括Firefox,如`fnAdd(oListbox, sName, sValue)`函数,它通过创建新的Option元素并将其添加到Select中。 2. **删除Option** 删除Select中的Option可以通过选择...

    HTML DOM基础教程(网页形式)

    HTML DOM DOM 首页 DOM 简介 DOM 节点 DOM 节点树 DOM 节点访问 DOM 节点信息 DOM How To DOM 参考 ...DOM Option DOM Select DOM Style DOM Table DOM TableCell DOM TableRow DOM Textarea

    Select Tag's options process

    总结来说,这个主题涵盖了Web开发中动态更新下拉列表的基本技术,包括理解HTML Select和Option元素,以及如何使用JavaScript进行DOM操作。通过博客和示例代码,我们可以深入学习这个过程,并了解可能涉及到的高级...

    jquery获得selectoption值[文].pdf

    以下是一些关于如何使用jQuery获取和设置`select`、`option`、`radio`、`checkbox`以及文本输入(`input[type=text]`)等元素的值的关键知识点: 1. **获取选中的`select`值**: ```javascript var item = $(...

Global site tag (gtag.js) - Google Analytics