博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
表单(三):select
阅读量:5077 次
发布时间:2019-06-12

本文共 2686 字,大约阅读时间需要 8 分钟。

选择框的value属性

如果用户选择了其中第一项,则选择框的值就是'Sunnyvale,Ca',如果文本为'China'的选项被选中,则选择框的值就是一个空字符串,因为其value

特性是空的。如果选择了最后一项,那么由于<option>中没有指定value特性,则选择框的值就是'Australia'.

 

<option>

每个<option>元素都有一个HTMLOptionElement对象表示,为了便于访问数据,HTMLOptionElement对象添加了下列属性
index:当前选项在options集合中的索引。
label:当前选项的标签;等价于HTML中的label特性。
selected:布尔值,表示当前选项是否被选中。
text:选项的文本。
value:选项的值

var selectbox = document.forms[0].elements['location'];var text = selectbox.option[0].text; //选项的文本var value = selectbox.option[0].value; //选项的值

 

选择选项

1、只允许选择一项对选择框,访问选中项对最简单方式,就是使用选择对selectedIndex属性

var selectedOption = selectbox.options[selectbox.selectedIndex];//取得选中项之后,可以像下面这样显示该选项对信息:var selectedIndex = selectbox.selectedIndex;var selectedOption = selectbox.options[selectedIndex];console.log('Select index: ' + selectedIndex + '\nSelected text: ' + selectedOption.text + '\nSelected value: ' + selectedOption.value);

2、对于可以选择多项的选择框,有一种选择选项的方式,就是取得对某一项对引用,然后对其selected属性设置为true.

selectbox.options[0].selected = true;

在允许多选对选择框中设置选项对selected属性,不会取消对其他选中项对选择,因而可以动态选中任意多个项。

要取得所有选中对项,可以循环遍历选项集合,然后测试每个选项对selected属性。

function getSelectedOptions(selectbox){    var result = new Array();    var option = null;    for(var i=0,len=selectbox.options.length; i

 

添加选项

1、使用dom方法

var newOption = document.createElement('option');newOption.appendChild(document.createTextNode('Option text'));newOption.setAttribute('value', 'Option value');selectbox.appendChild(newOption);

2、使用Option构造函数,这个构造函数是dom出现之前就有的,一直遗留到现在。Option构造函数接受两个参数

文本(text)和值(value);第二个参数可选

var newOption = new Option('Option text', 'Option value');selectbox.appendChild(newOption); //在ie8及之前版本中有问题

这种方式在除ie之外的浏览器都可以使用。

3、使用选择框的add()方法。dom规定这个方法接受两个参数:要添加的新选项和将位于新选项之后的选项。

var newOption = new Option('Option text', 'Option value');selectbox.add(newOption, undefined); //最佳方案

想在列表中的最后添加一个选项,应该将第二个参数设置为null。在ie对add()方法的实现中,第二个参数是可选的,而且如果指定,该参数必须是新选项之后选项的索引。

兼容dom的浏览器要求必须指定第二个参数,因此编写跨浏览器的代码,就不能只传入一个参数。
如果不是最后一个,使用标准的dom技术和insertBefore()方法。

 

移动选项

1、使用dom的removeChild()方法

selectbox.removeChild(selectbox.options[0]);

2、使用选项框的remove()方法。接受一个参数,索引

selectbox.remove(0);

3、设置选项为null, dom出现之前浏览器的遗留机制。

selectbox.options[0] = null;

4、要清除所有的项,迭代

function clearSelectbox(selectbox){    for(var i=0,len=selectbox.options.length; i

 

移动和重排选择

1、从一个选择框的选项移动到另一个选择框

var selectbox1 = document.getElementById('selLocation1');var selectbox2 = document.getElementById('selLocation2');selectbox2.appendChild(selectbox1.options[0]);

移动选项和移除选项,都会重置每一个选项都index属性

2、重排选择框的顺序

var optionToMove = selectbox.options[1];selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index-1]);

 

转载于:https://www.cnblogs.com/wzndkj/p/8871645.html

你可能感兴趣的文章
Angular1.0路由的Hashbang和HTML5模式
查看>>
uboot配置过程详解1
查看>>
ajax复选框的选中添加
查看>>
万门大学-人工智能、大数据与复杂系统-01.复杂系统
查看>>
《机器学习基石》---线性回归
查看>>
js实现滑动返回顶部
查看>>
BZOJ 1208 [HNOI2004]宠物收养所:Splay(伸展树)
查看>>
vm setup灰色解决办法
查看>>
机器学习基石笔记14——机器可以怎样学得更好(2)
查看>>
mac lion 系统安装
查看>>
Linux下程序守护脚本的应用实例
查看>>
win7开启Administrator账户
查看>>
Vue.js中全局组件和局部组件的编写差异和注意事项
查看>>
cordova 日曆 聯系人 插件使用
查看>>
1046: [HAOI2007]上升序列(dp)
查看>>
Maven创建Web项目、、、整合SSM框架
查看>>
转!!深入理解 Session 与 Cookie
查看>>
Dojo 1.6 beta1 发布
查看>>
用node.js做cluster,监听异常的邮件提醒服务
查看>>
VC++以及VS个版本比较 及 C++编译器比较
查看>>