How to create a dynamically filled drop-down menus in Bizform
This article describes how to create a dynamically filled drop-down menus in Bizform using simple form control and custom code.
Sometimes you want to have several drop-down menus on your bizform, and let them to be filled dynamically in dependence on the previous selection. It the first drop-down you can e.g. offer some traffic violations, and based on the selection fill the next drop-down menu with particular values. Or do a state selection by the same approach.
You need to create
custom form control which will be used in the bizform afterwards. You can use several drop-down menus, fill them with appropriate values e.g. from text array and ensure requested functionality. You can see example here:
Definition of two drop-down menus:
<asp:DropDownList ID=”DropDownList1” Runat=”server”
OnSelectedIndexChanged=”DropDownList1_SelectedIndexChanged”
AutoPostBack=”true”>
<asp:ListItem>State 1</asp:ListItem>
<asp:ListItem>State 2</asp:ListItem>
<asp:ListItem>State 3</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID=”DropDownList2” Runat=”server” Visible=”false”>
</asp:DropDownList>
<asp:Button ID=”Button1” Runat=”server” Text=”Select Options”
OnClick=”Button1_Click” />
C# code:
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
string[] Country1Array = new string[4] {“Option 1”, “Option 2”, “Option 3”, “Option 4”};
string[] Country2Array = new string[3] {“Option 1”, “Option 2”,
“Option 3”};
string[] Country3Array = new string[3] {“Option 1”, “Option 2”, “Option 3”};
if (DropDownList1.SelectedValue == “State 1”)
{
DropDownList2.DataSource = Country1Array;
}
else if (DropDownList1.SelectedValue == “State 2”)
{
DropDownList2.DataSource = Country2Array;
}
else
{
DropDownList2.DataSource = Country3Array;
}
DropDownList2.DataBind();
DropDownList2.Visible = true;
}
protected void Button1_Click(object sender, EventArgs e)
{
Response.Write(“You selected <b>” +
DropDownList1.SelectedValue.ToString() + “: “ +
DropDownList2.SelectedValue.ToString() + “</b>”);
}
See also: Applies to: Kentico CMS 4.x