Asp.net、Javascript

我在asp.net中有下拉列表1。我想根据下拉列表1的选定值填充另一个下拉列表2。如何实现这一点。我不想从db填充。我有硬编码的值

这是我的第一个下拉列表

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

函数GetSelectedTextValue（ddl1）{
var selectedText=ddl1.options[ddl1.selectedIndex].innerHTML；
var selectedValue=ddl1.value；
警报（“选定文本：+selectedText+”值：+selectedValue”）；
//用于填充ddl2的代码。基于ddl1的文本
}

您可以使用此代码片段更改第二个dropdownlist的选项。 注意：首先需要jquery（用于简单性）

函数GetSelectedTextValue（ddl1）{ var selectedText=ddl1.options[ddl1.selectedIndex].innerHTML； var selectedValue=ddl1.value； 警报（“选定文本：+selectedText+”值：+selectedValue”）； PopulatedDropDown2（选择文本）； } 函数PopulateDropdown2（selectedValue）{ 开关（selectedValue）{ 案例“全部”： $（“#ddl2”） .html（'--选择一个选项--'+ “我的选项1”+ “我的选择2”+ “我的选择3”）； 打破 “阿托克”案： $（“#ddl2”） .html（'--选择一个选项--'+ “我的第二个选项1”+ “我的第二个选择2”+ “我的第二个选择3”）； 打破 违约： $（“#ddl2”） .html（'--选择一个选项--'+ “我的第三个选择1”+ “我的第三个选择2”+ “我的第三个选择3”）； } } 您可以在switch子句中添加其他选项值，使代码更好。

add

onchange=“GetSelectedTextValue（this）”

---

您可以设置DropDownList AutoPostBack=“true”。因此，您可以为这个dropdownlist添加一个事件，该事件将在索引更改期间触发，并且在该方法中，您可以填充第二个dropdownlist。类似于将事件添加到第一个下拉列表

OnSelectedIndexChanged=“索引\u已更改”

如果您关闭AutoPostBack，那么使用JS填充数据是值得的。

他们称之为“级联下拉”搜索，有很多例子

 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>');
    }
}

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
}