分享個小執行個體，廢話少說，直接上代碼.....
貼上JS代碼：
Js代碼 1 <script type="text/javascript">
2 $(function () {
3 $("#btnGet").click(function () {
4 $.ajax({
5 url: "GetDatas.ashx",
6 type: "Post",
7 contentType: "application/json",
8 dataType: "json",
9 success: function (data) {
10 var ddl = $("#ddlDatas");
11
12 //刪除節點
13 RemoveOption();
14
15 //方法1：添加預設節點
16 ddl.append("<option value='-1'>--請選擇--</option>");
17
18 //方法2：添加預設節點
19 //ddl[0].options.add(new Option("--請選擇--", "-1"));
20
21 //轉成Json對象
22 var result = eval(data);
23
24 //迴圈遍曆 下拉框綁定
25 $(result).each(function (key) {
26 //第一種方法
27 var opt = $("<option></option>").text(result[key].ProName).val(result[key].ProID);
28 ddl.append(opt);
29
30 //第二種方法
31 // var proid = result[key].ProID;
32 // var proname = result[key].ProName;
33 //調用自訂方法
34 //AppendOption(proid, proname);
35 });
36
37 //第三種方法
38 //$.each(result, function (key, value) {
39 //alert("dd");
40 //var op = new Option(value.ProName, value.ProID);
41 // ddl[0].options.add(op);
42 // });
43 },
44 error: function (data) {
45 alert("Error");
46 }
47 });
48 });
49
50
51 });
52
53 function RemoveOption() {
54 $("#ddlDatas option").remove();
55 }
56
57 function AppendOption(value, text) {
58 $("#ddlDatas").append("<option value='" + value + "'>"+ text + "</option>");
59 }
60 </script>
貼上Html代碼：
Html1 <body>
2 <form id="form1" runat="server">
3 <div>
4 <asp:DropDownList ID="ddlDatas" name="prov" runat="server" style="width:200px;">
5 </asp:DropDownList>
6 <input type="button" id="btnGet" value="擷取資料" />
7 </div>
8 </form>
9 </body>
貼上後台ashx頁面擷取資料代碼：
擷取資料 1 public class GetDatas : IHttpHandler
2 {
3 //【測試用】簡單取得資料
4 public void ProcessRequest(HttpContext context)
5 {
6 string sqlConn=@"Data Source=Admin-PC;Initial Catalog=HolyKnight;Persist Security Info=True;User ID=ni;Password=******";
7 string sql="select * from Provice";
8 using (SqlConnection conn = new SqlConnection())
9 {
10 DataSet ds = BAF.DataBase.SqlHelper.ExecuteDataset(sqlConn, CommandType.Text, sql);
11 DataTable dt = ds.Tables[0];
12 //轉成Json格式資料
13 string proStr = JsonConvert.SerializeObject(dt);
14 context.Response.ContentType = "text/plain";
15 context.Response.Write(proStr);
16
17 }
18 }
效果：
擷取選中的值：
取值1 //取值
2 $("#ddlDatas").change(function () {
3 //取得選中的文本值
4 var selectText = $(this).find("option:selected").text();
5 alert(selectText);
6 //擷取選中的value值
7 var selectVlaue = $(this).find("option:selected").val();
8 alert(selectVlaue);
9 });
