Javascript获取DropDownList选项信息

这是一个asp.net普通javascript的练习，是使用javascript去获取DropDownList Selected 选项的信息，如text,value和index等。

Insus.NET在.aspx.cs内准备好一些数据，是有关浏览器相关信息的，并写在泛型Dictionary<T,V>：

 private Dictionary<string, string> GetBrowser()    {        Dictionary<string, string> dict = new Dictionary<string, string>();        dict.Add("google", "chrome");        dict.Add("Mozilla", "firefox");        dict.Add("microsoft", "ie");        dict.Add("opera", "opera");        dict.Add("safari", "apple");        return dict;    }

View Code

在网页中，拉(PULL)DropDownList控件入网页.aspx中。

 <asp:DropDownList ID="DropDownList1" runat="server">                           </asp:DropDownList>

View Code

去.aspx.cs为DropDownList控件绑定数据：



写Javascript脚本：

function GetSelectedInfo() {            var ddl = document.getElementById('<% =DropDownList1.ClientID %>');            var info = "      The value is: " + ddl.options[ddl.selectedIndex].value + ".\n\r                text is: " +                ddl.options[ddl.selectedIndex].text + ".\n\r option index is: " +                ddl.selectedIndex;            alert(info);        }

View Code

为了能执行上面的javascript脚本，Insus.NET在网页拉一个Button,然后让这个Button 执行一个OnClientClick客户端事件。

 <asp:Button ID="Button1" runat="server" Text="Get info" OnClientClick="GetSelectedInfo();" />

OK，试运行看看：