`
zhangyaochun
  • 浏览: 2610609 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

DOM Select对象

阅读更多

DOM Select对象

 

   ---- 代表HTML表单中的一个下拉框

 

         <select>标签每出现一次,一个Select对象就会被创建

 

举例参考:

 

 

<select id="test">
   <option value="0">1000</option>
   <option value="1">2000</option>
   <option value="2">3000</option>
   <option value="3">4000</option>
</select>

 

 

Select对象属性

 

 

  • length    ------  返回下拉框列表的选项数目
document.getElementById('test').length;  //4
     

 

  • multiple  -------设置或返回是否选择多个项目

  

<select id="test" multiple>
</select>

//或者用js去设置
document.getElementById('test').multiple = true;
  

 

 

 

Select对象集合

 

   ------options     返回包含下拉框列表中所有选项的一个数组

 

 

var el = document.getElementById('test');
var str ="";
for(var i=0;i<el.length;i++){
   //访问el.options这个[]
    str += el.options[i].text;
    str += '&nbsp;'
}
console.log(str);   //1000&nbsp;2000&nbsp;3000&nbsp;400&nbsp;
 

 

 

 

Select对象方法

 

  • add   ---- 向下拉框添加一个选项

/*
@param option  必需 要添加的选项元素
@param before
*/
selectObj.add(option,before);

 

  举例:

 

 

var test  = document.getElementById('test');
var y = document.createElement('option');
y.text = '新建的选项';
try{
    test.add(y,null);
}catch(e){
    test.add(y);   //IE
}
 

 

 

 

  •  remove  -----从下拉框列表删除选项

/*
@index  必需。删除的选项的索引号
如果下标比0小或者大于或等于选项的数目,则忽略remove操作
*/
selectObj.remove(index);
  
   举例:

//删除选中的option
var test = document.getElementById('test');
test.remove(test.selectedIndex);

//删除最后一个
test.remove(test.length-1);
 
  


 

 

 

 

 

分享到:
评论

相关推荐

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

    DOM 对象 DOM Window DOM Navigator DOM Screen DOM History DOM Location DOM Document DOM Anchor DOM Area DOM Base DOM Body DOM Button DOM Event DOM Form DOM Frame DOM Frameset DOM IFrame ...

    Jquery 操作 Dom 标签 select

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

    dom select 工具类

    在这个场景中,"DOM Select工具类"指的是一个JavaScript库或者函数集合,专门用于简化DOM元素的选择和操作。 在JavaScript中,我们通常使用`document.getElementById`、`document.getElementsByTagName`、`document...

    Javascript操作dom对象之select全面解析

     &lt;select id=university&gt; 北京大学&gt;北京大学 ...1.获取select对象; var university=document.getElementById(university); 2.获取select选中option的index值; var index=university.selectedIndex;

    layui 监听select选择 获取当前select的ID名称方法

    //得到select原始DOM对象 console.log(data.value); //得到被选中的值 console.log(data.othis); //得到美化后的DOM对象 }); 获取自定义属性 data.elem.getAttribute("data-id") 例子:取得ID名称 form.on('...

    Html dom _BOM 模型 _事件处理机制 _面向对象基础

    DOM中常见的对象包括Select、Option、Table、TableRow、TableCell等,这些对象有着特定的属性和方法,比如Select对象的选项数、Option对象的文本和值、Table对象的行和列操作等。 2. BOM模型(浏览器对象模型) BOM...

    第十五章JavaScript-HTMLDOM对象2022优秀文档.ppt

    Select对象的`options`属性可以访问其包含的所有Option元素,`selectedIndex`和`value`属性分别用于获取或设置选中项的索引和值。在HTML中,我们可以为Select元素添加onChange事件,如示例所示,当选项改变时,`...

    cool的JQuery自定义select

    jQuery是一款强大的JavaScript库,它简化了JavaScript的DOM操作、事件处理和动画制作等任务。在"cool的JQuery自定义select"中,jQuery被用来动态地控制和展示select元素。这个插件通过CSS样式和JavaScript功能,将...

    layui问题之模拟select点击事件的实例讲解

    - `data.elem` 获取select的原始DOM对象。 - `data.value` 获取被选中的值。 #### 查看layui源码 - **触发select事件**: 通过查看layui的源码,了解select事件的实现原理。 - 找到select元素之后的div.layui-...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part1.rar

     3.5.1 DOM2 HTML 的HTMLDocument对象   3.5.2 DOM2 HTML 的HTMLElement对象   3.6 实例:将手工HTML代码转换为DOM代码   3.6.1 DOM生成工具的HTML文件   3.6.2 使用示例HTML片段进行测试   3.6.3 ...

    select下拉框添加搜索功能

    这通常涉及到DOM操作,包括获取`select`元素、遍历其所有`option`子元素,然后根据输入的关键词进行匹配,显示或隐藏匹配的选项。这种方式需要对HTML、CSS和JavaScript有较深入的理解,并且工作量相对较大。 2. **...

    jquery模拟select

    * @param tiggle 展开事件 [*click | mouseover | 其他dom事件] * @return object 返回对象本身 * @disription 节点(html)内部自定义属性说明 * selected 默认选中[等同于option selected] * r-value 值[等同于...

    jquery实现select互斥联动

    可以通过JSON对象或服务器接口获取联动数据,然后动态生成和更新`select`选项。同时,可以考虑使用插件如`select2`来增强`select`元素的样式和功能。 综上所述,jQuery实现的select互斥联动是一种常见的前端交互...

    dom4j.jar包

    5. **转换为DOM对象**:DOM4J可以将XML文档转换为DOM对象,反之亦然,这为使用DOM4J和其他基于DOM的库之间的互操作提供了便利。 ### 二、DOM4J的使用场景 1. **配置文件处理**:许多Java应用的配置信息存储为XML...

    select2+jquery

    4. **配置**:可以通过设置配置对象来定制Select2的行为,如设置搜索延迟、数据源等。 5. **AJAX集成**:在描述中提到了"使用Select2 ajax",这意味着Select2可以动态从服务器获取选项,通过设置`ajax`选项,可以...

    dom4j-2.1.0.jar

    它不仅实现了DOM(Document Object Model)接口,还引入了基于事件的SAX(Simple API for XML)解析方式和面向对象的模型,使得开发者在处理XML时能更直观和方便。 2. **DOM4J的三大jar文件** - `dom4j-2.1.0.jar`...

    jq写的模拟elementui的select

    而`el_set_value(obj)`则是用于改变Select的选中值,这个函数可能内部会处理DOM操作,找到对应的选项并设置为选中状态。 要实现这样的模拟,我们需要考虑以下关键点: 1. **结构**:创建一个HTML结构,包含一个...

    js实现动态生成select中的option

    // 将select元素添加到DOM document.body.appendChild(select); ``` 5. **事件监听**:根据需要,还可以添加事件监听器,如`change`事件,以便在用户选择选项时执行某些操作。 6. **页面布局**:在`autoSelect....

Global site tag (gtag.js) - Google Analytics