ZohaibRazaTheDProgrammer Ответов: 3

Как заполнить один выпадающий список на основе значений, выбранных в другом выпадающем списке, используя javascript в ASP .NET?


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>

и
<asp:DropDownList ID="ddlReason" runat="server"></asp:DropDownList>

Я хочу достичь этого:
Когда я выбираю "Ma" из "ddlStatus", то я должен получить следующие элементы в "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

3 Ответов

Рейтинг:
24

Vincent Maverick Durano

Здесь вы идете:

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>


С ФОНОВЫМ КОДОМ:

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


Karthik_Mahalingam

5!

Vincent Maverick Durano

Спасибо! :)

JayantaChatterjee

Простой и эффективный подход..
Мой 5ед...

Vincent Maverick Durano

Спасибо, сэр! очень ценю! :)

ZohaibRazaTheDProgrammer

@Vincent Maverick Durano сердечно благодарит вас. Это работает потрясающе. -Привет

Vincent Maverick Durano

Добро пожаловать. Я рад быть полезным :)

Рейтинг:
2

JayantaChatterjee

Попробуйте это сделать в Html и 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>


Надеюсь, это вам поможет....


ZohaibRazaTheDProgrammer

@JayantaChatterjee спасибо вам за ваш ответ. "ddlStatus" и "ddlReason" находятся в Столбцах полей шаблона gridview, как мы можем получить доступ к этим элементам управления в вашей функции?

JayantaChatterjee

Вы можете получить там удостоверения личности вот так:
var selectedStatus=document. getElementById("<%=ddlStatus.ClientID%>");

Рейтинг:
0

ZohaibRazaTheDProgrammer

@F-ES Sitecore спасибо вам за Ваш быстрый ответ. Если вы, пожалуйста, прочтете мой вопрос, то увидите, что я ясно упомянул, что не хочу использовать "базу данных" или "AJAX Control" - с уважением

F-ES Sitecore

Вместо того чтобы привязывать элементы к выпадающему списку просто добавляйте их программно

http://www.aspsnippets.com/Articles/Programmatically-add-items-to-DropDownList-on-Button-Click-in-ASPNet-using-C-and-VBNet.aspx

Код в вашем событии изменения элемента, вероятно, будет оператором if или переключателем типа;

если (яод.Значение = "Фруктов")
{
// очистите второй выпадающий список и добавьте все фрукты
}
остальное, если (яод.Значение = "Автомобили")
{
// очистите второй выпадающий список и добавьте все автомобили
}