JavaScript 连动下拉选单的应用

(本帖在版工的旧 Blog 中，发表日期为 2007/06/29)

我们在实作「连动下拉选单」时 (选了第一个下拉选单后，才会动态带出其它下拉选单的选项)，若选单内容日后不须常更动，即可考虑直接写死在 JavaScript 中，而无须从后端数据库中，捞出数据后再绑定至下拉选单 (DropDownList)。但若已写死成 JavaScript，又需要把 user 选过的选项存储下来后，在其它页面中再以同样选项的连动下拉选单，自动带出 user 曾经选过的选项的话，由于页面刚开启时，尚未触发第一个下拉选单中 JavaScript 的 onChange 事件，所以其它下拉选单的选项也尚未生成，因此按照默认，无法将前一页所保存的选项，指派给后一页尚未产生内容的下拉选单。
(若您不了解我想表达的意思，建议直接执行本帖的 ASP.NET 2.0 下载范例代码，即可了解)

解决方式，是在 ASPX 页面加载时，用 HTML + C# + JavaScript 代码，强制触发第一个下拉选单 JavaScript 的 onChange 事件，先连动带出其它下拉选单的选项。但 JavaScript 中的 onChange 事件不同于 onBlur 或 onFocus 事件，能够直接调用 object.blur() 和 object.focus() 等 method，并没有所谓的 object.change() 这个 method；但我们可以改用 object.fireEvent() 去触发 onChange 事件，如下所示：
document.all.DropDownList1.fireEvent('onChange');

若有上述存储连动下拉选单选项、再于别页显示的需求时，我们即可先透过「存储值」(包括取自数据库、QueryString 或 Session 等方式所存储的值)，将其指定给第二页的第一个下拉选单、先指定其默认选项，再以上述方式，用代码触发其 onChange 事件，即可在第二页页面载入的同时，将其它所有连动下拉选单的内容都一次带出来。本帖下载范例，执行画面如下：

图 1　三个 DropDownList，互相有连动关系，选完第一个选单，才会带出第二个选单的选项，并依此类推

图 2　将三个 DropDownList 的选项，透过 QueryString 带到第二页，并在页面载入的同时，即触发 JavaScript 的 fireDDL1 函数

本帖范例下载点：
https://files.cnblogs.com/WizardWu/070629.zip

执行时不需要数据库。此范例的做法亦适用于各类型网站开发技术，真正的关键程序是位于 JavaScript 文件夹中的那支 CreateDDLItems.js 程序。

第一頁 .aspx

第一頁 .aspx.cs

相关阅读:
A Summaryof JDBC
Chinese Messy Code of String
Use Spring @Scheduled To Achieve Timing Task
关于拦截器实现日志存储到db的代码调试
Java Web指导方向
错误The request sent by the client was syntactically incorrect ()的解决
jdbc实现简单的增删改查
连接oracle jdbc
关键路径求解算法
<form> 标签的entype属性

原文地址：https://www.cnblogs.com/WizardWu/p/1244774.html