HTML 表单列表框对象基础知识
列表选项对象 :
使用如下方法可以获取到表单上的列表框对象
语法: document.formname.selectname
示例代码:
<form name=testform>
<select name=sel>
<option value=test> 测试选项 </option>
</select>
</form>
<script language="javascript">
var cbobject= document.testform.sel;
</script>
这里是与列表框有关的事件、 dom 属性和方法。
事件句柄: 与表单控件类型列表框相关:
如下所有示例使用了 javascript 自定义函数 output
<script language=javascript>
function output()
{
alert("测试列表框事件");
}
</script>
| 事件 | 说明 | 示例 |
| onMouseOver | 当鼠标指针移动到列表框上的时候触发 |
结果：
| d>| 当在列表框上按下鼠标的时候触发 |
结果：
|
| onMouseUp | 当在列表框上释放鼠标的时候触发 |
结果：
|
| onChange | onChange 在改变了列表框选中值时触发 |
结果：
|
| onBlur | 当 通过按 Tab 键等方式让列表框失去焦点时触发
|
结果：
|
| onFocus | 当 通过按 Tab 键等方式让列表框获得焦点时触发
|
结果：
|
DOM 属性:
如下是 DOM (文档对象模型 Dynamic Object Model) 中定义的属性列表
可用于在 javascript 中获取或修改复列表框属性。
下面的示例代码基于表单
<form name=tests>
<select name=sel>
<option value=test> 测试列表框选项 </option>
<option value=test2> 测试项目2</option>
</select>
</form>
| DOM 属性 | 说明 | 示例 |
| length | 用于取得列表框长度（即列表框选项的个数） |
获取时用：
var len = document.tests.sel.length;
|
| name | 用于获取列表框对象的名称 |
获取时用：
var ss = document.tests.sel.name;
|
| options | 返回列表框全部可选项的数组 |
获取时用：
var ss = document.tests.sel.options;
|
| selectedindex | selectedindex 用于获取或设置列表框选中项目的索引 |
获取时用：
var ss = document.tests.sel.selectedindex;
回报1 ，如果第二个选项是选定的.
设置时用：
document.tests.sel.selectedindex = 0;
|
| text | 返回列表框可选项上的文本 |
获取时用：
var dd = document.tests.sel.selectedIndex;
var ss = document.tests.sel[dd].text;
|
DOM 方法:
如下是 DOM (文档对象模型 Dynamic Object Model) 中定义的方法列表
用于在 javascript 中完成动态修改如单选框选择事件等代码。
| DOM 方法 | 说明 | 示例 |
| blur() | 用于动态让列表框失去焦点 |
失去焦点时用:
document.testb.mycb.blur();
|
| focus() | 用于动态让列表框获取焦点 |
获得焦点时用:
document.testb.mycb.focus();
|
示例: 当鼠标移动到列表框上时，选中第二个可选项。
<script language=javascript>
function sevent()
{
var xx = document.xx.sbox;
document.xx.sbox.selectedIndex = 1;
}
</script>
<form name=xx>
<select name=sbox onMouseOver="sevent()">
<option value="option 1">可选项 1</option>
<option value="option 2">可选项 2</option>
</select>
</form>
结果:
| 
导言
