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

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

转载于:https://www.cnblogs.com/holyknight-zld/archive/2012/10/23/Json_Bind_DropDownList.html

Ajax获取Json对象绑定下拉框相关推荐

  1. ajax里绑定框,Select级联菜单，用Ajax获取Json绑定下拉框（jQuery）

    需求类似这样  ↓ ↓ ↓   --> 菜单A发生变化,动态取数据填充下拉菜单B. JS代码如下: $(function () { $("#TeamSelect").chan ...

  2. highcharts ajax 数据格式,Highcharts ajax获取json对象动态生成报表生成 .

    最近做个项目,项目经理想做一个统计报表,在网上查看些资料就选用Highchars 这里和大家分享下使用心得. 重点说明此代码是针对一个报表显示多个项对比显示. 直接贴代码:web端 $(documen ...

  3. python爬取下拉列表数据_Python+selenium之获取文本值和下拉框选择数据

    Python+selenium之获取文本值和下拉框选择数据 一.结合实例进行描述 1. 实例如下所示: #新增标签操作 def func_labels(self): self.driver.find_ ...

  4. jquery ajax 找到数据怎样放到下拉框里_闲话Excel之简易数据动态图表的制作

    今天早上你的老板和你说让你把今年1-6月份的员工业绩做一份报表发给他,务必简介直观,但是你目前手头就以下的数据: 你肯定不能将这个发给你老板啊,既不简洁也不直观,该咋办呢?我建议用动态图表的方法,且听 ...

  5. jquery 获取和设置 select下拉框的值(转手册)

    ##实例应用中遇到的问题 //在某事件响应的应用中设置select选中项,前两种情况的设置不生效,使用了最后一种用法才生效的 //$("#select_time").find(&q ...

  6. jquery 获取和设置 select下拉框的值

    获取Select : 获取select 选中的 text : $("#ddlRegType").find("option:selected").text(); ...

  7. Ajax简单示例之改变下拉框动态生成表格

    1.建立一个aspx页面,html代码 <html xmlns="http://www.w3.org/1999/xhtml" > <head runat=&quo ...

  8. JS解析JSON并生成下拉框

    Gobj.options.length=0;                         for(var i in vJsonObj){//遍历packJson 数组时,i为索引          ...

  9. ajax下拉框省市级联动

    目录 效果 sql数据 前后台代码实现 效果 初始访问页面 选中省会,自动刷新页面 sql数据 -- 省市联动数据CREATE TABLE PROVINCE (PID NUMBER PRIMARY K ...

最新文章

  1. 真我与小我隔着什么？
  2. Keil进入仿真，窗口不显示程序运行箭头
  3. python判断linux中文件是否存在_linux shell 中判断文件、目录是否存在的方法
  4. CSS word-wrap强制换行截断长字符串
  5. php 字符ascii转中文,PHP ASCII码与字符串相互转换的方法
  6. Android 比SwipeRefreshLayout更漂亮和强大的下拉刷新控件：Android-MaterialRefreshLayout
  7. 【struts2】继承ActionSupport类
  8. 基于vue.js仿淘宝收货地址，并设置默认地址
  9. 我要多开梦幻手游PC端（梦幻手游PC端多开的简单分析及实现办法）
  10. 大话私服虚拟服务器,大话西游私服服务器
  11. 微信公众号发送红包（源码）
  12. python ValueError: No JSON object could be decoded
  13. Coding and Paper Letter（七十）
  14. 视频 | 太壮观了！阿尔乌拉打破全球最大热气球发光表演纪录
  15. mysql 、pg 查询日期处理
  16. 头文件和源文件的连接
  17. python xlsx 样式 谷歌开源 样式_连续加班一周最终把所有的Python库整理出来了，愿各位早日学会Py-站长资讯中心...
  18. div显示在底部(一种固定不变，另一种随页面上下翻动而动)
  19. 见与不见=班扎古鲁白玛的沉默
  20. BitComet (比特彗星)有效提高下载速度Tracker list

热门文章

  1. Axure仿微信UI
  2. MacType v1.2016.0902.1
  3. Android内容提供者ContentProvider总结
  4. Android项目开发实战之绘图
  5. 没有人能挽回时间的狂流
  6. 《卡耐基写给男人的12堂财商课》摘录
  7. STM32使用电容屏,从查询改为中断
  8. tmpfs临时文案系统
  9. Office2019、Office365自定义安装
  10. SSM项目引入sharding JDBC进行分表