通過JavaScript對DropDownList的操作 / 初學

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1.在用戶端編寫 “OnSelectedIndexChanged” 事件
由於在用戶端不識別 OnSelectedIndexChanged 事件，但是我們可以寫其 onchange 事件，然後為
DropDownList 動態添加屬性（onchange）。

<asp:DropDownList ID="SelectProvince" runat="server" AutoPostBack="True"></asp:DropDownList>this.SelectProvince.Attributes.Add("onchange", "return SelectionChanged();");

2.在用戶端動態綁定 DropDownList 的值

var option = document.createElement("option");
option.text = message[1];
option.value = message[0];
selectCity.options.add(option);

3.通過 javascript 擷取 DropDownList 的值

var dropDownList = document.getElementById("SelectProvince");
var provinceId = dropDownList.options[dropDownList.selectedIndex].value;

3.通過 Ajax 實現省市聯動。
我做了一個 Test ，不多說，看代碼：　
1.Default.aspx

Code

2.Default.aspx.cs

Code

3.Hello.aspx (XMLHttpRequest 的url)

Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Hello.aspx.cs" Inherits="Hello" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Hello</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
    </form>
</body>
</html>

4.Hello.aspx.cs

Code
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;

public partial class Hello : System.Web.UI.Page
{
    string connectionString = ConfigurationManager.ConnectionStrings["DbConn"].ConnectionString;
    string rootID = null;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.QueryString["rootId"] != null)
        {
            rootID = Request.QueryString["rootId"].ToString();
            SendCityInfo();
        }
    }

    public void SendCityInfo()
    {
        using (SqlConnection conn = new SqlConnection(connectionString))
        {
            conn.Open();
            using (SqlCommand cmd = conn.CreateCommand())
            {
                cmd.Parameters.Add("@id", SqlDbType.Int).Value = Convert.ToInt32(rootID);
                cmd.CommandText = "select CityId,CityName from City where rootId = @id";
                using (SqlDataReader dr = cmd.ExecuteReader())
                {
                    while (dr.Read())
                    {
                        string id = dr["CityId"].ToString();
                        string name = dr["CityName"].ToString();
                        Response.Write(id + " " + name);
                        Response.Write("$");
                    }
                }
            }
        }
    }
}

5.xmlHttp.js

Code

6.web.config

這裡要用到資料庫的串連.如果要用上面的例子，請下載相關資料庫。
資料庫檔案下載

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More