Asp.net, Javascript

Question

我在 asp.net 中下降了 1。我想根据下拉列表 2 的选定值填充另一个下拉列表 1。我怎样才能做到这一点。我不想从数据库填充。我有硬编码的值。

这是我的第一个下拉菜单

<asp:DropDownList runat="server" CssClass="form-group" ID="ddl1" AutoPostBack="true" AppendDataBoundItems="true" Width="259px" onchange="GetSelectedTextValue(this)">
     <asp:ListItem Selected="True" Value="All">All</asp:ListItem>
     <asp:ListItem Value="ATTOCK">ATTOCK</asp:ListItem>
     <asp:ListItem Value="BAHAWALNAGAR">BAHAWALNAGAR</asp:ListItem>
     <asp:ListItem Value="BAHAWALPUR">BAHAWALPUR</asp:ListItem>
</asp:DropDownList>

这是我要填充的第二个下拉列表。

<asp:DropDownList runat="server" CssClass="form-group" ID="ddl2" Width="259px">
     <asp:ListItem Selected="True" Value="-1">---All---</asp:ListItem>
</asp:DropDownList>

JavaScript函数是

<script type="text/javascript">
     function GetSelectedTextValue(ddl1) {
        var selectedText = ddl1.options[ddl1.selectedIndex].innerHTML;
        var selectedValue = ddl1.value;
        alert("Selected Text: " + selectedText + " Value: " + selectedValue);
      //code to populate ddl2. based on text of ddl1
    }
</script>

Answer 1

您可以

设置 DropDownList AutoPostBack="true"。因此，您可以为此下拉列表添加一个事件，该事件将在索引更改期间触发，并且在该方法中，您可以填充第二个下拉列表。就像在第一个下拉列表中添加一个事件一样。

OnSelectedIndexChanged="Index_Changed"

如果关闭 AutoPostBack，则值得使用 JS 填充数据。

Answer 2

您可以使用此代码片段更改第二个下拉列表的选项。注意：首先你需要jquery（用于简单起见）

 function GetSelectedTextValue(ddl1) {
    var selectedText = ddl1.options[ddl1.selectedIndex].innerHTML;
    var selectedValue = ddl1.value;
    alert("Selected Text: " + selectedText + " Value: " + selectedValue);
    PopulateDropDown2(selectedText);
}
function PopulateDropdown2(selectedValue) {
    switch(selectedValue) {
        case "All":
            $("#ddl2")
            .html('<option >--Select an Option--</option>' +
                   '<option value="0">My Option 1</option>' + 
                   '<option value="1">My Option 2</option>' +
                   '<option value="2">My Option 3</option>');
            break;
        case "ATTOCK":
            $("#ddl2")
            .html('<option >--Select an Option--</option>' +
                   '<option value="0">My Second Option 1</option>' + 
                   '<option value="1">My Second Option 2</option>' +
                   '<option value="2">My Second Option 3</option>');
            break;
        default:
            $("#ddl2")
            .html('<option >--Select an Option--</option>' +
                   '<option value="0">My Third Option 1</option>' +
                   '<option value="1">My Third Option 2</option>' +
                   '<option value="2">My Third Option 3</option>');
    }
}

您可以在 switch 子句中添加其他选项值，并使代码更好。

Answer 3

添加onchange="GetSelectedTextValue(this)"

function GetSelectedTextValue(t) {
        vat txt = t.options[t.selectedIndex].text;
        var val = t.value;
        alert("Selected Text: " + txt + " Value: " + val);
      //code to populate ddl2. based on text of ddl1
}