• 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 函数
     
     
    本帖范例下载点:
     
    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
Copyright © 2020-2023  润新知