如何使用ASP .NET中的javascript根据在另一个下拉列表中选择的值填充一个下拉列表？ [英] How to populate one dropdownlist based on values selected in another dropdownlist using javascript in ASP .NET?
本文介绍了如何使用ASP .NET中的javascript根据在另一个下拉列表中选择的值填充一个下拉列表？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
I have two DropDownLists inside a GridView (gvwDta). My two DropDownLists are:
<asp:DropDownList ID="ddlStatus" runat="server">
<asp:ListItem></asp:ListItem>
<asp:ListItem>Ma</asp:ListItem>
<asp:ListItem>Mi</asp:ListItem>
<asp:ListItem>Others</asp:ListItem>
</asp:DropDownList>
和
and
<asp:DropDownList ID="ddlReason" runat="server"></asp:DropDownList>
我想要实现这个目标：
当我从ddlStatus中选择Ma时，我应该在ddlReason中获得以下项目：
I want to acheive this:
When I select "Ma" from "ddlStatus" then I should get the following items in "ddlReason":
"OK"
"Good"
When I select "Mi" from "ddlStatus" then I should get the following items in "ddlReason":
"Data"
"Resource"
"Time"
I do not want to bind the DropDownLists to database or use AJAX.
Any help will be highly appreciated.
Regards
我尝试过：
我已尝试过此链接中的建议：
http://www.aspsnippets.com/Articles/Get-selected -Text-and-Value-of-DropDownList-in-OnChange-event-using-JavaScript-and-jQuery.aspx
What I have tried:
I have tried the suggestions in this link:
http://www.aspsnippets.com/Articles/Get-selected-Text-and-Value-of-DropDownList-in-OnChange-event-using-JavaScript-and-jQuery.aspx
推荐答案
在这里：
ASPX：
Here you go:
ASPX:
<html xmlns="http://www.w3.org/1999/xhtml" mode="hold" /><head runat="server">
<title></title>
<script type="text/javascript">
function buildDropDown(obj) {
var status = obj.options[obj.selectedIndex].value;
var row = obj.parentNode.parentNode;
var rowIndex = row.rowIndex - 1;
//you may need to change the index of cells value based on the location
//of your ddlReason DropDownList
var ddlReason = row.cells[1].getElementsByTagName('SELECT')[0];
switch (status) {
case "Ma":
ddlReason.options[0] = new Option("OK", "OK");
ddlReason.options[1] = new Option("Good", "Good");
break;
case "Mi":
ddlReason.options[0] = new Option("Data", "Data");
ddlReason.options[1] = new Option("Resoure", "Resoure");
ddlReason.options[2] = new Option("Time", "Time");
break;
case "Others":
ddlReason.options[0] = new Option("Some Item", "Some Item");
break;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:DropDownList ID="ddlStatus" runat="server" onchange="buildDropDown(this);">
<asp:ListItem></asp:ListItem>
<asp:ListItem Value="Ma">Ma</asp:ListItem>
<asp:ListItem Value="Mi">Mi</asp:ListItem>
<asp:ListItem Value="Others">Others</asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:DropDownList ID="ddlReason" runat="server">
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</form>
</body>
</html>
背后的代码：
CODE BEHIND:
using System;
namespace WebFormDemo
{
public partial class GridView : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e) {
if (!IsPostBack) {
GridView1.DataSource = new object[] { "1","2","3" };
GridView1.DataBind();
}
}
}
}
Googleasp.net级联下拉列表
在ASP中创建级联DropDownLists。净 [ ^ ]
如何在Asp.Net中创建级联下拉列表AspdotnetCodehelp [ ^ ]
Google "asp.net cascading dropdown"
Creating Cascading DropDownLists in ASP.Net[^]
how to create Cascading Dropdown list in Asp.Net | AspdotnetCodehelp[^]
在Html和Javascript中尝试这个..
Try this it's in Html and Javascript..
<HTML>
<BODY>
<script>
function changeReason()
{
var selectedStatus=document.getElementById("cmbStatus");
var Reason=document.getElementById("cmbReason");
var MaArr=new Array("OK","Good");
var MiArr=new Array("Data","Resource","Time");
// alert(selectedStatus.value);
removeOptions(Reason);
if(selectedStatus.value=="Ma")
{
for(i=0;i<2;i++)
{
var option = document.createElement("option");
option.text = MaArr[i];
option.value = MaArr[i];
Reason.add(option);
}
}
else if(selectedStatus.value=="Mi")
{
for(i=0;i<3;i++)
{
var option = document.createElement("option");
option.text = MiArr[i];
option.value = MiArr[i];
Reason.add(option);
}
}
}
function removeOptions(selectbox)
{
var i;
for(i = selectbox.options.length - 1 ; i >= 0 ; i--)
{
selectbox.remove(i);
}
}
</script>
Select One <select id="cmbStatus" onchange="changeReason()">
<option value="Ma">Ma</option>
<option value="Mi">Mi</option>
<option>Others</option>
</select>
<select name="cmbReason">
</select>
</BODY>
</HTML>
我希望这会对你有帮助....
I hope this will help You....
这篇关于如何使用ASP .NET中的javascript根据在另一个下拉列表中选择的值填充一个下拉列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
