Javascript 列表框对象
如何用 javascript 获取列表框中选中的值?
或者还
列表框(SelectBox)有哪些相关的事件?
解释
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>
结果: