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，试运行看看：