• 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
  • 相关阅读:
    Linux 服务器连接远程数据库(Mysql、Pgsql)
    oracle主键自增
    全排列算法实现
    python动态导入包
    python发红包实现
    CentOS 6.8安装Oracle 11 g 解决xhost: unable to open display
    xargs的一个小坑
    利用ssh-copy-id复制公钥到多台服务器
    redhat 5 更换yum源
    【原创】Hadoop的IO模型(数据序列化,文件压缩)
  • 原文地址:https://www.cnblogs.com/WizardWu/p/1244774.html
Copyright © 2020-2023  润新知