深入理解选择框脚本深入理解选择框脚本[推荐推荐]
前面的话前面的话
选择框是通过<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(){