十四像素

使用createEvent来实现联动下拉

5月 7th, 2009

No comments

联动下拉是一个很多地方都要用到的实用功能，使用createEvent创建并调用下拉框的onchange事件可以减少代码的冗余度，并且在多个下拉框数据同步刷新时使用比较简单清晰的代码结构实现多层事件联动。

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>无标题文档</title> <script language="javascript">  </script> </head> <body> <SELECT id="SEL_1" onchange="change1(this);"> <option value="0">A1</option> <option value="1">A2</option> <option value="2">A3</option> </SELECT> <SELECT id="SEL_2" onchange="change2(this);"> <option value="0">B1</option> <option value="1">B2</option> <option value="2">B3</option> </SELECT> <SELECT id="SEL_3" onchange="change3(this);"> <option value="0">C1</option> <option value="1">C2</option> <option value="2">C3</option> </SELECT> <SELECT id="SEL_4"> <option value="0">D1</option> <option value="1">D2</option> <option value="2">D3</option> </SELECT> </body> </html>

提示：你可以先修改部分代码再运行。

在这个例子中，后两个下拉选择框的值都会根据前一个下拉选择框值的改变而改变，可以使用类似的办法实现更复杂的功能，比如使用ajax来异步填充数据等

shieh js+ajax

Archive

使用createEvent来实现联动下拉

分类

最新文章

最新评论

充电器

关注web标准化的朋友

身边

十四像素

Archive

使用createEvent来实现联动下拉

分类

标签

最新文章

最新评论

充电器

关注web标准化的朋友

身边