十四像素

Home > js+ajax > 使用createEvent来实现联动下拉

使用createEvent来实现联动下拉

5月 7th, 2009

联动下拉是一个很多地方都要用到的实用功能，使用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来异步填充数据等

使用createEvent来实现联动下拉

分类

最新文章

最新评论

充电器

关注web标准化的朋友

身边

十四像素

使用createEvent来实现联动下拉

分类

标签

最新文章

最新评论

充电器

关注web标准化的朋友

身边