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