2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > Ajax获取Json对象绑定下拉框

Ajax获取Json对象绑定下拉框

时间:2022-11-01 05:24:46

相关推荐

Ajax获取Json对象绑定下拉框

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

贴上JS代码:

Js代码1<scripttype="text/javascript">

2$(function(){

3$("#btnGet").click(function(){

4$.ajax({

5url:"GetDatas.ashx",

6type:"Post",

7contentType:"application/json",

8dataType:"json",

9success:function(data){

10varddl=$("#ddlDatas");

11

12//删除节点

13RemoveOption();

14

15//方法1:添加默认节点

16ddl.append("<optionvalue='-1'>--请选择--</option>");

17

18//方法2:添加默认节点

19//ddl[0].options.add(newOption("--请选择--","-1"));

20

21//转成Json对象

22varresult=eval(data);

23

24//循环遍历下拉框绑定

25$(result).each(function(key){

26//第一种方法

27varopt=$("<option></option>").text(result[key].ProName).val(result[key].ProID);

28ddl.append(opt);

29

30//第二种方法

31//varproid=result[key].ProID;

32//varproname=result[key].ProName;

33//调用自定义方法

34//AppendOption(proid,proname);

35});

36

37//第三种方法

38//$.each(result,function(key,value){

39//alert("dd");

40//varop=newOption(value.ProName,value.ProID);

41//ddl[0].options.add(op);

42//});

43},

44error:function(data){

45alert("Error");

46}

47});

48});

49

50

51});

52

53functionRemoveOption(){

54$("#ddlDatasoption").remove();

55}

56

57functionAppendOption(value,text){

58$("#ddlDatas").append("<optionvalue='"+value+"'>"+text+"</option>");

59}

60</script>

贴上Html代码:

Html1<body>

2<formid="form1"runat="server">

3<div>

4<asp:DropDownListID="ddlDatas"name="prov"runat="server"style="width:200px;">

5</asp:DropDownList>

6<inputtype="button"id="btnGet"value="获取数据"/>

7</div>

8</form>

9</body>

贴上后台ashx页面获取数据代码:

获取数据1publicclassGetDatas:IHttpHandler

2{

3//【测试用】简单取得数据

4publicvoidProcessRequest(HttpContextcontext)

5{

6stringsqlConn=@"DataSource=Admin-PC;InitialCatalog=HolyKnight;PersistSecurityInfo=True;UserID=ni;Password=******";

7stringsql="select*fromProvice";

8using(SqlConnectionconn=newSqlConnection())

9{

10DataSetds=BAF.DataBase.SqlHelper.ExecuteDataset(sqlConn,CommandType.Text,sql);

11DataTabledt=ds.Tables[0];

12//转成Json格式数据

13stringproStr=JsonConvert.SerializeObject(dt);

14context.Response.ContentType="text/plain";

15context.Response.Write(proStr);

16

17}

18}

效果:

获取选中的值:

取值1//取值

2$("#ddlDatas").change(function(){

3//取得选中的文本值

4varselectText=$(this).find("option:selected").text();

5alert(selectText);

6//获取选中的value值

7varselectVlaue=$(this).find("option:selected").val();

8alert(selectVlaue);

9});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。