javascript - Loading and clearing dropdowns
A typical problem wherein a series of controls - in this case a textbox and two drop downs - needed to be enabled or disabled and loaded with data depending on the value in the previous control.
The drop downs are loaded on focus and cleared when the textbox changes, all in javascript. No postbacks unless data has to be loaded.
<%@ Page language=”c#” Codebehind=”WebForm1.aspx.cs” AutoEventWireup=”false” Inherits=”WebApplication2.WebForm1” %>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name=”GENERATOR” Content=”Microsoft Visual Studio .NET 7.1”>
<meta name=”CODE_LANGUAGE” Content=”C#”>
<meta name=”vs_defaultClientScript” content=”JavaScript”>
<meta name=”vs_targetSchema” content=”http://schemas.microsoft.com/intellisense/ie5”>
<script>
function Populate(nIndex)
{
if (((nIndex == 1) && (document.forms[0].HidDd1Pb.value == “1”))
((nIndex == 2) && (document.forms[0].HidDd2Pb.value == “1”)))
{
document.forms[0].DdName.value = nIndex;
document.forms[0].submit();
}
}
function assignDd1Pb()
{
document.forms[0].HidDd1Pb.value = “1”;
document.forms[0].HidDd2Pb.value = “0”;
i=0;
while (i < document.forms[0].DropDownList1.options.length)
document.forms[0].DropDownList1.options[i] = null; i=0; while (i < document.forms[0].DropDownList2.options.length)
document.forms[0].DropDownList2.options[i] = null;
}
</script>
</HEAD>
<body>
<form runat=”server”>
<input runat=”server” type=”hidden” id=”DdName” name=”DdName”>
<input runat=”server” type=”hidden” id=”HidDd1Pb” name=”HidDd1Pb” value=”0”> <input runat=”server” type=”hidden” id=”HidDd2Pb” name=”HidDd2Pb” value=”0”>
<P>
<asp:TextBox id=”TextBox1” runat=”server”></asp:TextBox></P>
<P><INPUT runat=”server” id=”chkEnableDDs” type=”checkbox” onclick=”DropDownList1.disabled = (!this.checked); DropDownList2.disabled = (!this.checked);”></P>
<P> </P>
<P>
<asp:DropDownList Enabled=”False” id=”DropDownList1” runat=”server”></asp:DropDownList></P>
<P>
<asp:DropDownList Enabled=”False” id=”DropDownList2” runat=”server”></asp:DropDownList></P>
<P>
<asp:Button id=”Button1” runat=”server” Text=”Button”></asp:Button></P>
</form>
</body>
</HTML>
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace WebApplication2
{
/// <summary>
/// Summary description for WebForm1.
/// </summary>
public class WebForm1 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.TextBox TextBox1;
protected System.Web.UI.WebControls.DropDownList DropDownList1;
protected System.Web.UI.WebControls.DropDownList DropDownList2;
protected System.Web.UI.WebControls.Button Button1;
protected System.Web.UI.HtmlControls.HtmlInputHidden DdName;
protected System.Web.UI.HtmlControls.HtmlInputHidden HidAction;
protected System.Web.UI.HtmlControls.HtmlInputHidden HidDd1Pb;
protected System.Web.UI.HtmlControls.HtmlInputHidden HidDd2Pb;
protected System.Web.UI.HtmlControls.HtmlInputCheckBox chkEnableDDs; private void Page_Load(object sender, System.EventArgs e)
{
if (!IsPostBack)
{
DropDownList1.Attributes.Add(“onFocus”, “return Populate(1);”);
DropDownList2.Attributes.Add(“onFocus”, “return Populate(2);”);
TextBox1.Attributes.Add(“onChange”, “return assignDd1Pb();”);
}
else
{
if (chkEnableDDs.Checked)
{
DropDownList1.Enabled = true;
DropDownList2.Enabled = true;
}
else
{
DropDownList1.Enabled = false;
DropDownList2.Enabled = false;
}
if (Request[”DdName”] == “1”)
{
DropDownList1.Items.Clear();
DropDownList2.Items.Clear();
DropDownList1.Items.Add(TextBox1.Text + “1”);
DropDownList1.Items.Add(TextBox1.Text + “2”);
DropDownList1.Items.Add(TextBox1.Text + “3”);
HidDd1Pb.Value = “0”;
HidDd2Pb.Value = “1”;
DdName.Value = “”;
}
else if (Request[”DdName”] == “2”)
{
if (DropDownList1.Items.Count == 0)
{
Response.Write(“Populate DropDownList1 first”);
return;
}
DropDownList2.Items.Clear();
DropDownList2.Items.Add(DropDownList1.SelectedValue + “1”);
DropDownList2.Items.Add(DropDownList1.SelectedValue + “2”);
DropDownList2.Items.Add(DropDownList1.SelectedValue + “3”);
HidDd2Pb.Value = “0”;
DdName.Value = “”;
}
}
}
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.Button1.Click += new System.EventHandler(this.Button1_Click);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
private void Button1_Click(object sender, System.EventArgs e)
{
Response.Write(“Button1_Click”);
}
}
}
The drop downs are loaded on focus and cleared when the textbox changes, all in javascript. No postbacks unless data has to be loaded.
<%@ Page language=”c#” Codebehind=”WebForm1.aspx.cs” AutoEventWireup=”false” Inherits=”WebApplication2.WebForm1” %>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name=”GENERATOR” Content=”Microsoft Visual Studio .NET 7.1”>
<meta name=”CODE_LANGUAGE” Content=”C#”>
<meta name=”vs_defaultClientScript” content=”JavaScript”>
<meta name=”vs_targetSchema” content=”http://schemas.microsoft.com/intellisense/ie5”>
<script>
function Populate(nIndex)
{
if (((nIndex == 1) && (document.forms[0].HidDd1Pb.value == “1”))
((nIndex == 2) && (document.forms[0].HidDd2Pb.value == “1”)))
{
document.forms[0].DdName.value = nIndex;
document.forms[0].submit();
}
}
function assignDd1Pb()
{
document.forms[0].HidDd1Pb.value = “1”;
document.forms[0].HidDd2Pb.value = “0”;
i=0;
while (i < document.forms[0].DropDownList1.options.length)
document.forms[0].DropDownList1.options[i] = null; i=0; while (i < document.forms[0].DropDownList2.options.length)
document.forms[0].DropDownList2.options[i] = null;
}
</script>
</HEAD>
<body>
<form runat=”server”>
<input runat=”server” type=”hidden” id=”DdName” name=”DdName”>
<input runat=”server” type=”hidden” id=”HidDd1Pb” name=”HidDd1Pb” value=”0”> <input runat=”server” type=”hidden” id=”HidDd2Pb” name=”HidDd2Pb” value=”0”>
<P>
<asp:TextBox id=”TextBox1” runat=”server”></asp:TextBox></P>
<P><INPUT runat=”server” id=”chkEnableDDs” type=”checkbox” onclick=”DropDownList1.disabled = (!this.checked); DropDownList2.disabled = (!this.checked);”></P>
<P> </P>
<P>
<asp:DropDownList Enabled=”False” id=”DropDownList1” runat=”server”></asp:DropDownList></P>
<P>
<asp:DropDownList Enabled=”False” id=”DropDownList2” runat=”server”></asp:DropDownList></P>
<P>
<asp:Button id=”Button1” runat=”server” Text=”Button”></asp:Button></P>
</form>
</body>
</HTML>
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace WebApplication2
{
/// <summary>
/// Summary description for WebForm1.
/// </summary>
public class WebForm1 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.TextBox TextBox1;
protected System.Web.UI.WebControls.DropDownList DropDownList1;
protected System.Web.UI.WebControls.DropDownList DropDownList2;
protected System.Web.UI.WebControls.Button Button1;
protected System.Web.UI.HtmlControls.HtmlInputHidden DdName;
protected System.Web.UI.HtmlControls.HtmlInputHidden HidAction;
protected System.Web.UI.HtmlControls.HtmlInputHidden HidDd1Pb;
protected System.Web.UI.HtmlControls.HtmlInputHidden HidDd2Pb;
protected System.Web.UI.HtmlControls.HtmlInputCheckBox chkEnableDDs; private void Page_Load(object sender, System.EventArgs e)
{
if (!IsPostBack)
{
DropDownList1.Attributes.Add(“onFocus”, “return Populate(1);”);
DropDownList2.Attributes.Add(“onFocus”, “return Populate(2);”);
TextBox1.Attributes.Add(“onChange”, “return assignDd1Pb();”);
}
else
{
if (chkEnableDDs.Checked)
{
DropDownList1.Enabled = true;
DropDownList2.Enabled = true;
}
else
{
DropDownList1.Enabled = false;
DropDownList2.Enabled = false;
}
if (Request[”DdName”] == “1”)
{
DropDownList1.Items.Clear();
DropDownList2.Items.Clear();
DropDownList1.Items.Add(TextBox1.Text + “1”);
DropDownList1.Items.Add(TextBox1.Text + “2”);
DropDownList1.Items.Add(TextBox1.Text + “3”);
HidDd1Pb.Value = “0”;
HidDd2Pb.Value = “1”;
DdName.Value = “”;
}
else if (Request[”DdName”] == “2”)
{
if (DropDownList1.Items.Count == 0)
{
Response.Write(“Populate DropDownList1 first”);
return;
}
DropDownList2.Items.Clear();
DropDownList2.Items.Add(DropDownList1.SelectedValue + “1”);
DropDownList2.Items.Add(DropDownList1.SelectedValue + “2”);
DropDownList2.Items.Add(DropDownList1.SelectedValue + “3”);
HidDd2Pb.Value = “0”;
DdName.Value = “”;
}
}
}
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.Button1.Click += new System.EventHandler(this.Button1_Click);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
private void Button1_Click(object sender, System.EventArgs e)
{
Response.Write(“Button1_Click”);
}
}
}
Comments
Post a Comment