深入理解选择框脚本[推荐]


Posted in Javascript onDecember 13, 2016

前面的话

选择框是通过<select>和<option>元素创建的,又称为下拉列表框。为了方便与这个控件交互,除了所有表单字段共有的属性和方法外,javascript还提供了一些属性和方法。本文将详细介绍选择框脚本

<select>

首先介绍关于<select>元素的相关属性

multiple

multiple属性表示是否允许多项选择

<select name="test" id="test">
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>
<button id="btn">是否多选</button>
<script>
btn.onclick = function(){
 test.multiple = !test.multiple;
} 
</script>

type

选择框的type属性有两种,一种是'select-one',表示单选;另一种是'select-multiple',表示多选

<select name="test" id="test">
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>
<button id="btn">是否多选</button>
<div id="result"></div>
<script>
btn.onclick = function(){
 test.multiple = !test.multiple;
 result.innerHTML = test.type;
} 
</script>

value

选择框的value属性由当前选中项决定

1、如果没有选中的项,则选择框的value属性保存空字符串

2、如果有一个选中项,而且该项的value特性已经在HTML中指定,则选择框的value属性等于选中项的value特性。即使value特性的值是空字符串,也同样遵循此条规则

3、如果有一个选中项,但该项的value特性在HTML中未指定,则选择框的value属性等于该项的文本

4、如果有多个选中项,则选择框的value属性将依据前两条规则取得第一个选中项的值

[注意]IE8-浏览器只支持value属性的值,不支持选择的文本值

<select name="test" id="test">
 <option value="a">1</option>
 <option value="b">2</option>
 <option>3</option>
</select>
<button id="btn1">是否多选</button>
<button id="btn2">获取value值</button>
<div id="result"></div>
<script>
btn1.onclick = function(){
 test.multiple = !test.multiple;
} 
btn2.onclick = function(){
 result.innerHTML = test.value;
}
</script>

selectedIndex

selectedIndex属性返回基于0的选中项的索引,如果没有选中项,则值为-1。对于支持多选的控件,只保存选中项中第一项的索引

<select name="test" id="test">
 <option value="a">1</option>
 <option value="b">2</option>
 <option>3</option>
</select>
<button id="btn1">是否多选</button>
<button id="btn2">获取索引</button>
<div id="result"></div>
<script>
btn1.onclick = function(){
 test.multiple = !test.multiple;
} 
btn2.onclick = function(){
 result.innerHTML = test.selectedIndex;
}
</script>

size

size属性表示选择框的可见行数

<select name="test" id="test">
 <option value="a">1</option>
 <option value="b">2</option>
 <option>3</option>
</select>
<button id="btn1">可见1行</button>
<button id="btn2">可见2行</button>
<button id="btn3">可见3行</button>
<div id="result"></div>
<script>
btn1.onclick = function(){
 test.size = 1;
} 
btn2.onclick = function(){
 test.size = 2;
}
btn3.onclick = function(){
 test.size = 3;
}
</script>

options

options属性表示控件中所有的<option>元素

<select name="test" id="test">
 <option value="a">1</option>
 <option value="b">2</option>
 <option>3</option>
</select>
<script>
//[option, option, option, selectedIndex: 0]
console.log(test.options)
</script>

<option>

在DOM中,每个<option>元素都有一个HTMLOptionElement对象表示。为便于访问数据, HTMLOptionElement对象也定义了一些属性

[注意]IE浏览器不支持为<option>元素设置display:none

index

index属性表示当前选项在options集合中的索引

label

label属性表示当前选项的标签

[注意]IE9-浏览器不支持

selected

selected属性表示当前选项是否被选中。将这个属性设置为true可以选中当前选项

text

text属性表示选项的文本

value

value属性表示选项的值

[注意]在未指定value特性的情况下,IE8会返回空字符串;而其他浏览器返回text属性的值

<select name="test" id="test">
 <option value="a" selected>1</option>
 <option value="b">2</option>
 <option>3</option>
</select>
<script>
var option = test.options[0];
console.log(option.index);//0
console.log(option.label);//1,IE9-浏览器返回空字符串''
console.log(option.selected);//true
console.log(option.text);//1
console.log(option.value);//a
</script>

添加选项

【1】添加选项可以使用DOM的appendChild()或insertBefore()方法

<select name="test" id="test">
 <option>1</option>
 <option>3</option>
</select>
<button id="btn">增加选项2</button>
<script>
btn.onclick = function(){
 var newOption = document.createElement('option');
 newOption.innerHTML = 2;
 test.insertBefore(newOption,test.options[1]);
}
</script>

【2】可以使用选择框的add()方法,add(newoption,reloption)方法向控件中插入新<option>元素,其位置在相关项(reloption)之前

使用Option构造函数来创建新选项,接受两个参数:文本(text)和值(value),第二个参数可选

<select name="test" id="test">
 <option>1</option>
 <option>3</option>
</select>
<button id="btn">增加选项2</button>
<script>
btn.onclick = function(){
 var newOption = new Option('2');
 test.add(newOption,1);
}
</script>

移除选项

与添加选项类似,移除选项的方式也有很多种

【1】使用DOM的removeChild()方法

<select name="test" id="test">
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>
<button id="btn">移除选项2</button>
<script>
btn.onclick = function(){
 test.removeChild(test.options[1]);
}
</script>

【2】使用选择框的remove()方法。这个方法接受一个参数,即要移除选项的索引

[注意]使用该方法的好处是,若不存在被移除选项的索引,不会报错,只是静默失败

<select name="test" id="test">
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>
<button id="btn">移除选项2</button>
<script>
btn.onclick = function(){
 test.remove(1);
}
</script>

【3】将相应选项设置为null

[注意]该方法同样不会报错

<select name="test" id="test">
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>
<button id="btn">移除选项2</button>
<script>
btn.onclick = function(){
 test.options[1] = null;
}
</script>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
javascript实现依次输入input自动定焦
Dec 23 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 Javascript
javascript实现一个简单的弹出窗
Feb 22 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
Sep 27 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
js实现纯前端压缩图片
Nov 16 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 #Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 #Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 #Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 #Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 #Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 #Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 #Javascript
You might like
解析php php_openssl.dll的作用
2013/07/01 PHP
php构造函数的继承方法
2015/02/09 PHP
javascript FormatNumber函数实现方法
2008/12/30 Javascript
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
css3发光搜索表单分享
2014/04/11 HTML / CSS
美国旅游网站:Tours4Fun
2017/02/17 全球购物
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
入学申请自荐信范文
2014/02/26 职场文书
党员廉洁自律承诺书
2014/05/26 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
vue+springboot实现登录验证码
2021/05/27 Vue.js
php修改word的实例方法
2021/11/17 PHP
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server