Conditionally Showing Drop Down List
Question
I am creating a very basic order form (and am still in the design phase), and have a place where their is potential to input into about 14 different drop down lists. Well IF possible, I would not want to show all 14 drop down lists, I would only want to show the 1st and if it is filled in, then show the 2nd, and if it is filled in show the 3rd etc etc...
I am using C# and webforms and am creating the drop down lists using asp.net -- using that as a basis is their a Javascript function or C# syntax or someway of achieving the above? This is a snippet of what I have (I am not showing full syntax as it literally just repeats itself for each drop down)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="test">
<tr>
<td><asp:Label ID="labelone" runat="server" Text="Label One:"></asp:Label></td>
<td class="style3">
<asp:DropDownList ID="dropdownlist1" runat="server" Height="20px" Width="278px"
AutoPostBack="true"></asp:DropDownList></td>
<td>
<asp:Label ID="labeltwo" runat="server" Text="Label Two:"></asp:Label></td>
<td class="style2">
<asp:DropDownList ID="dropdownlist2" runat="server" Height="20px" Width="45px"
AutoPostBack="true"></asp:DropDownList></td>
</tr>
<tr>
<td><asp:Label ID="label" runat="server" Text="Label OneOne:"></asp:Label></td>
<td class="style3">
<asp:DropDownList ID="dropdownlist33" runat="server" Height="20px" Width="278px"
AutoPostBack="true"></asp:DropDownList></td>
<td>
<asp:Label ID="label2" runat="server" Text="Label TwoTwo:"></asp:Label></td>
<td class="style2">
<asp:DropDownList ID="dropdownlist4" runat="server" Height="20px" Width="45px"
AutoPostBack="true"></asp:DropDownList></td>
</tr>
</table>
</div>
</form>
</body>
</html>
2 answers
solution1
0 2015-11-27 04:12:06
<asp:DropDownList ID="ddl1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="Dropdownlist_SelectionChanged" />
<asp:DropDownList ID="ddl2" runat="server" AutoPostBack="true" OnSelectedIndexChanged="Dropdownlist_SelectionChanged" />
<asp:DropDownList ID="ddl3" runat="server" AutoPostBack="true" OnSelectedIndexChanged="Dropdownlist_SelectionChanged" />
protected void Dropdownlist_SelectionChanged(object sender, EventArgs e)
{
var ddl = sender as DropDownList;
switch(ddl.ID) {
case "ddl1":
ddl2.Visible = true;
break;
case "ddl2":
ddl3.Visible = true;
break;
// and so on
}
}
solution2
0 ACCPTED 2015-11-27 04:18:20
Quick script for dependency enabling / disabling.
Use like this:
$(document).ready(function() {
new dependencyChain($("#ImNumberTwo"), [ $("#ImNumberOne") ]);
new dependencyChain($("#ImNumberThree"), [ $("#ImNumberOne"), $("#ImNumberTwo") ]);
});
var dependencyChain = function(el, dependencies) { var self = this; var element = el; this.dependencies = dependencies; this.init = function() { for (var i in this.dependencies) { var dependency = this.dependencies[i]; dependency.on("change", function() { self.checkDependencies(); }); } self.checkDependencies(); } this.checkDependencies = function() { var disable = false; for (var i in this.dependencies) { var dependency = this.dependencies[i]; if (dependency.val() == "") { disable = true; } } element.prop("disabled", disable); if (disable) { element.hide(); } else { element.show(); } } this.init(); } $(document).ready(function() { new dependencyChain($("#ImNumberTwo"), [ $("#ImNumberOne") ]); new dependencyChain($("#ImNumberThree"), [ $("#ImNumberOne"), $("#ImNumberTwo") ]); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="ImNumberOne"> <option></option> <option>EEEeeeeeeeey</option> </select> <select id="ImNumberTwo"> <option></option> <option>there!</option> </select> <select id="ImNumberThree"> <option></option> <option>there!</option> </select>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.