-
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
<body onload="fireDDL1()">
<form id="form1" runat="server">
<div>
第一頁<p></p>
<asp:HiddenField ID="HiddenField_step11" runat="server" />
<asp:HiddenField ID="HiddenField_step12" runat="server" />
<asp:HiddenField ID="HiddenField_step13" runat="server" />
<br />
<asp:DropDownList ID="DropDownList_step11" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="DropDownList_step12" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="DropDownList_step13" runat="server">
</asp:DropDownList>
<p></p>
<asp:Button ID="Button1" runat="server" Text="將值帶到下一頁" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
第一頁 .aspx.cs
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DropDownList_step11.Attributes["onChange"] = "build_FiveDdlOfStep11(this.selectedIndex);";
DropDownList_step12.Attributes["onChange"] = "saveValueToHiddenField12(this.selectedIndex);";
DropDownList_step13.Attributes["onChange"] = "saveValueToHiddenField13(this.selectedIndex);";
}
}
protected void Button1_Click(object sender, EventArgs e)
{
Response.Redirect("Default2.aspx?ddl1=" + HiddenField_step11.Value + "&ddl2=" + HiddenField_step12.Value + "&ddl3=" + HiddenField_step13.Value);
}
}
-
相关阅读:
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
润新知