随笔- 19 文章- 0 评论- 358 阅读- 17万

Ajax获取Json对象绑定下拉框

分享个小实例，废话少说，直接上代码.....

贴上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             });