Question

我正在创建一个非常基本的订单表单（并且仍处于设计阶段），并且有一个可以输入大约14个不同下拉列表的地方。那么 IF 可能，我不想显示所有14个下拉列表，我只想显示第1个，如果它被填写，然后显示第2个，如果它被填充显示第三等等...

我正在使用C#和webforms并使用asp.net创建下拉列表 - 使用它作为基础是他们的Javascript函数或C＃语法或者实现以上？这是我所拥有的片段（我没有显示完整的语法，因为它确实只是为每次下拉重复自己）

<%@ 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>

Answer 1

<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
    }
}

Answer 2

依赖性启用/禁用的快速脚本。

像这样使用：

$(document).ready(function() {
    new dependencyChain($("#ImNumberTwo"), [ $("#ImNumberOne") ]);
    new dependencyChain($("#ImNumberThree"), [ $("#ImNumberOne"), $("#ImNumberTwo") ]);
});

＆＃13;

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") ]);
});

＆＃13;

<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>

＆＃13;

有条件地显示下拉列表

2 个答案: