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


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函数
Dec 22 Javascript
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
Bootstrap3学习笔记(二)之排版
May 20 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
vue项目总结之文件夹结构配置详解
Dec 13 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
React-redux实现小案例(todolist)的过程
Sep 29 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 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
APMServ使用说明
2006/10/23 PHP
PHP加密解密函数详解
2015/10/28 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
摘自启点的main.js
2008/04/20 Javascript
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
javascript getElementsByClassName实现代码
2010/10/11 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
js实现分割上传大文件
2016/03/09 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
python实现kMeans算法
2017/12/21 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
详解Python sys.argv使用方法
2019/05/10 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
Linux上比较文件的命令都有哪些
2012/02/24 面试题
Java编程面试题
2016/04/04 面试题
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
致800米运动员广播稿
2014/02/16 职场文书
餐厅总厨求职信
2014/03/04 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
师范生见习总结范文
2015/06/23 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js