分享个小实例，废话少说，直接上代码.....
贴上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代码：
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>
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 });
334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
