说说 JavaScript 表单的选择框脚本
2017-07-06 15:15
302 查看
选择框通过
由 HTML 的 multiple 属性来决定选择框 type 属性值(select-one/select-multiple),选择框的 value 属性由选中项决定,规则如下:
使用这些属性可以很方便地对选项数据进行访问。虽然可以使用常规的 DOM 功能来访问它们,但效率较低,推荐使用选项属性直接访问:
只要选中了选项,就会触发选择框的 change 事件!而其他表单字段的 change 事件,只有在值被修改而且焦点离开当前字段时才会触发。
注意: 未指定 value 属性的情况下,IE8 会返回空字符串,而 IE9+ 以及其他浏览器会返回与 text 属性相同的值。
对于允许多选的选择框,设置 selectedIndex 会取消之前的所有选项,重新指定当前项为选中项。读取 selectedIndex,只会返回选中项的第一项的索引值。
另一种选择选项的方式是,先取得某一项的引用,然后将 selected 设置为 true :
对于允许多选的选择框来说,设置 selected 属性,就可以动态选中多个项。但在只允许单选的选择框中,设置 selected 属性,会取消其他的选中项;而且将 selected 设为 false,对单选的选择框没有影响。
通过 selected 属性,可以得知用户选择了哪一项:
注意:上述代码适用于 IE8 之后的版本以及其他浏览器!
也可以使用 add() 方法添加新选项,它接受两个参数:要添加的新选项和放在新选项之后的选项。因为 IE 的这个方法的第二个参数是可选的,而在兼容 DOM 的浏览器中第二个参数是必选的,所以我们这里传入 undefined:
如果要将新选项添加到其他位置,就必须使用标准的 DOM 技术和 insertBefore() 方法。
注意: Option 构造函数也支持一个参数(选项的文本)的情况!
也可以使用选择框的 remove() ,它接受是要移除的选项的索引:
第 3 种方式是将相应的选项设置为 null,这是 DOM 之前旧方法咯:
这样清除选择框选中的所有选项(迭代并逐个移除):
这个函数每次只移除第一个选项。因为移除第一个选项之后,其他的选项就会自动补位,所以只要重复移除第一个选项就可以啦O(∩_∩)O~
移动选项和移除选项有一点一样,那就是都会重置每一个选项的 index 属性。
appendChild() 只适用于把选项添加到选择框之后,所以我们使用 DOM 的 insertBefore() ,这个方法就可以把选择框中的某一项移动到特定位置,实现重排选项的功能:
注意: IE7 存在页面重绘的问题,可能会导致使用 DOM 方法的选项重排无法及时正确显示。
<select>和
<option>元素创建的。HTMLSelectElement 除了具有所有表单字段所共有的属性和方法外,还有这些:
属性或方法 | 说明 |
---|---|
add(newOption, relOption) | 在 relOption 之前插入新的 <option>元素。 |
multiple | 布尔值,是否允许多选,等价于 HTML 的 multiple 属性。 |
options | 所有 <option>元素的 HTMLCollection。 |
remove(index) | 移除给定位置的选项。 |
selectedIndex | 选中项的索引;基于 0;如果没有选中项,则为 -1。如果支持多选,这个值只表示选中项中的第一项的索引。 |
size | 选择框中可见的行数;等价于 HTML 的 size 属性。 |
条件 | value 值 |
---|---|
没有选中的项 | 空字符串 |
有一个选中项,且 value 属性在 HTML 中已指定 | 选中项的 value 属性 |
有一个选中项,但 value 属性在 HTML 中没有指定 | 选中项的文本。 |
有多个选中项 | 根据前两条规则取得第一个选中项的值。 |
<option>元素由 HTMLOptionElement 对象来表示,它有这些属性:
属性 | 说明 |
---|---|
index | 当前选项在 options 集合中的索引 |
label | 当前选项的标签;等价于 HTML 的 label 属性。 |
selected | 当前选项是否被选中;设为 true,就能选中该项。 |
text | 选项的文本。 |
value | 选项的值,等价于 HTML 的 value 属性。 |
var selectbox = document.forms[0].elements["location"]; // DOM 方法(不推荐) var text = selectbox.options[0].firstChild.nodeValue; var value = selectbox.options[0].getAttribute("value"); // 选项属性(推荐) var text = selectbox.options[0].text; var value = selectbox.options[0].value;
只要选中了选项,就会触发选择框的 change 事件!而其他表单字段的 change 事件,只有在值被修改而且焦点离开当前字段时才会触发。
注意: 未指定 value 属性的情况下,IE8 会返回空字符串,而 IE9+ 以及其他浏览器会返回与 text 属性相同的值。
1 选择选项
只允许单选的选择框,可以使用 selectedIndex 属性来访问选中项:<select name="location" id="selLocation"> <option value="fuzhou">福州</option> <option value="India">印度</option> </select> <script type="text/javascript"> var sel = document.getElementById("selLocation"); EventUtil.addHandler(sel, "change", function (event) { var selectedIndex = sel.selectedIndex; var selectedOption = sel.options[selectedIndex]; console.log("Selected index: " + selectedIndex + "\nSelected text: " + selectedOption.text + "\nSelected value: " + selectedOption.value); }); </script>
对于允许多选的选择框,设置 selectedIndex 会取消之前的所有选项,重新指定当前项为选中项。读取 selectedIndex,只会返回选中项的第一项的索引值。
另一种选择选项的方式是,先取得某一项的引用,然后将 selected 设置为 true :
selectbox.options[0].selected = true;
对于允许多选的选择框来说,设置 selected 属性,就可以动态选中多个项。但在只允许单选的选择框中,设置 selected 属性,会取消其他的选中项;而且将 selected 设为 false,对单选的选择框没有影响。
通过 selected 属性,可以得知用户选择了哪一项:
<select name="location" id="selLocation" multiple="multiple"> <option value="fuzhou">福州</option> <option value="India">印度</option> </select> <script type="text/javascript"> function getSelectedOptions(selectbox) { var result = new Array(); var option = null; for (var i = 0, len = selectbox.options.length; i < len; i++) { option = selectbox.options[i]; if (option.selected) { result.push(option); } } return result; } var selectbox = document.getElementById("selLocation"); EventUtil.addHandler(selectbox, "change", function (event) { var selectedOptions = getSelectedOptions(selectbox); var message = ""; for (var i = 0, len = selectedOptions.length; i < len; i++) { message += "Selected index: " + selectedOptions[i].index + "\nSelected text: " + selectedOptions[i].text + "\nSelected value: " + selectedOptions[i].value+"\n\n"; } console.log(message); }); </script>
2 添加选项
JavaScript 可以动态创建选项,并添加到选择框中:<script type="text/javascript"> var selectbox = document.getElementById("selLocation"); var newOption = document.createElement("option"); newOption.appendChild(document.createTextNode("Option text")); newOption.setAttribute("value", "Option value"); selectbox.appendChild(newOption); </script>
注意:上述代码适用于 IE8 之后的版本以及其他浏览器!
也可以使用 add() 方法添加新选项,它接受两个参数:要添加的新选项和放在新选项之后的选项。因为 IE 的这个方法的第二个参数是可选的,而在兼容 DOM 的浏览器中第二个参数是必选的,所以我们这里传入 undefined:
//将新选项添加到列表最后 var lastOption=new Option("last text","last value"); selectbox.add(lastOption,undefined);//跨浏览器方案
如果要将新选项添加到其他位置,就必须使用标准的 DOM 技术和 insertBefore() 方法。
注意: Option 构造函数也支持一个参数(选项的文本)的情况!
3 移除选项
可以使用 DOM 的 removeChild() 来移除选项,它接受的参数是要移除的选项;selectbox.removeChild(selectbox.options[0]);//移除第一项
也可以使用选择框的 remove() ,它接受是要移除的选项的索引:
selectbox.remove(0);//移除第一项
第 3 种方式是将相应的选项设置为 null,这是 DOM 之前旧方法咯:
selectbox.options[0] = null;
这样清除选择框选中的所有选项(迭代并逐个移除):
function clearSelectbox(selectbox){ for(var i=0, len=selectbox.options.length; i<len; i++){ selectbox.remove(i); } }
这个函数每次只移除第一个选项。因为移除第一个选项之后,其他的选项就会自动补位,所以只要重复移除第一个选项就可以啦O(∩_∩)O~
4 移动和重排选项
DOM 的 appendChild() 方法可以把第一个选择框中的选项直接移动到第二个选择框中。因为它会先把这个元素从父节点中移除,然后再添加到指定位置:<select name="location" id="selLocation" multiple="multiple"> <option value="fuzhou">福州</option> <option value="India">印度</option> </select> <select name="location2" id="selLocation2" multiple="multiple"> <option value="Thailand">泰国</option> </select> <script type="text/javascript"> var selectbox = document.getElementById("selLocation"); var selectbox2 = document.getElementById("selLocation2"); selectbox2.appendChild(selectbox.options[0]); </script>
移动选项和移除选项有一点一样,那就是都会重置每一个选项的 index 属性。
appendChild() 只适用于把选项添加到选择框之后,所以我们使用 DOM 的 insertBefore() ,这个方法就可以把选择框中的某一项移动到特定位置,实现重排选项的功能:
<select name="location" id="selLocation" multiple="multiple"> <option value="fuzhou">福州</option> <option value="India">印度</option> </select> <script type="text/javascript"> var selectbox = document.getElementById("selLocation"); var optionToMove = selectbox.options[1]; //第二项向前移动一位 selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index - 1]); //第一项向后移动一位 selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index + 2]); </script>
注意: IE7 存在页面重绘的问题,可能会导致使用 DOM 方法的选项重排无法及时正确显示。
相关文章推荐
- 说说 JavaScript 表单脚本之基础知识
- 说说 JavaScript 表单脚本之文本框
- 说说 JavaScript 表单脚本之富文本编辑功能
- web前端之JavaScript高级程序设计七:表单脚本
- JavaScript:表单常用验证脚本(整理)
- 打造可复用可扩展javascript验证表单脚本
- 打造可复用可扩展javascript验证表单脚本
- JavaScript常用检测脚本(三)表单验证
- JavaScript基础——表单脚本
- 通用的表单检查Javascript脚本
- 应用javascript脚本验证表单元素是否为空
- JAVASCRIPT:-->用脚本实现表单的分向提交
- JAVASCRIPT:-->用脚本实现表单的分向提交
- JavaScript基础——表单脚本
- javascript笔记8-表单脚本、JSON、AJAX
- JavaScript对表单元素脚本操作
- javascript脚本之表单验证(一些简单实用的javascript)
- javascript脚本获取表单中元素值。
- 打造可复用可扩展javascript验证表单脚本
- JavaScript高级程序设计--表单脚本