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


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 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
用javascript作一个通用向导说明
Aug 30 Javascript
从零学JS之你需要了解的几本书
May 19 Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
JS实现的文件拖拽上传功能示例
May 21 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
vue中的mvvm模式讲解
Jan 31 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实现多级树型菜单
2006/10/09 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
基于Laravel 多个中间件的执行顺序详解
2019/10/21 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
在Django框架中编写Context处理器的方法
2015/07/20 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
对python中各个response的使用说明
2020/03/28 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
计划生育工作总结2015
2015/04/03 职场文书
起诉状范本
2015/05/20 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python
教你用eclipse连接mysql数据库
2021/04/22 MySQL
python基础之文件处理知识总结
2021/05/23 Python
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS