Ajax獲取Json對象綁定下拉框

本文轉載自查看原文 2012-10-23 19:37 18254 AJAX

分享個小實例，廢話少說，直接上代碼.....

貼上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代碼：

Html

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Ajax獲取Json對象綁定下拉框 Select級聯菜單，用Ajax獲取Json綁定下拉框（jQuery） js綁定下拉框 js綁定下拉框數據源 easyui 綁定下拉框，下拉框選擇改變事件的觸發方法 vue select 動態綁定下拉框-設置默認值 element ui 下拉框綁定對象並且change傳多個參數 jquery獲取select下拉框的值以及change時間綁定 css模擬下拉框，vue獲取雙向綁定的值 Excel應該這么玩——4、命名區域：搞定下拉框