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 事件,即可在第二页页面载入的同时,将其它所有连动下拉选单的内容都一次带出来。本帖下载范例,执行画面如下:

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

figure2
 
图 2 将三个 DropDownList 的选项,透过 QueryString 带到第二页,并在页面载入的同时,即触发 JavaScript 的 fireDDL1 函数
 
 
本帖范例下载点:
 
http://files.cnblogs.com/WizardWu/070629.zip
 
 执行时不需要数据库。此范例的做法亦适用于各类型网站开发技术,真正的关键程序是位于 JavaScript 文件夹中的那支 CreateDDLItems.js 程序。

第一頁 .aspx


第一頁 .aspx.cs

你可能感兴趣的:(JavaScript)