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删除。

猜您在找 js绑定下拉框数据源 Excel应该这么玩——4、命名区域：搞定下拉框 vue动态生成下拉框，输入框值通过model双向绑定获取 layui绑定联动下拉框 Easy UI 下拉框绑定【失去焦点】事件并设置焦点的方法以及按下【Tab键】触发事件指定下一焦点的位置 html select 下拉框ajax 请求 ajax实现动态下拉框 js获取下拉框的值 vue获取下拉框值 jQ给下拉框绑定事件，为什么要绑定在框(select标签)上，而不是绑定在选项(option标签)上