jquery ajax下拉联动,Jquery中Ajax实现下拉列表联动

《Jquery中Ajax实现下拉列表联动》由会员分享，可在线阅读，更多相关《Jquery中Ajax实现下拉列表联动(4页珍藏版)》请在人人文库网上搜索。

1、Jquery中Ajax实现下拉列表联动(转载)【Js代码如下】：$(function() BindUnit(); Change(); );/下拉列表change事件function Change() $(#sel_unit).change(function() BindUnit_User(); );function BindUnit() $.ajax( type: POST, contentType: application/json, url: WebService.asmx/GetUnitDS, data: , /即使参数为空，也需要设置 dataType: xml, /返回的类型为XML。

2、 success: function(result) /成功时执行的方法/捕获处理过程中的异常并输出 try $(#sel_unit).empty(); $(result).find(Table).each(function(i) $(#sel_unit).append( + $(this).find(org_name).text() + ); );BindUnit_User();catch (e) alert(e);return;, error: function(result, status) /出错时会执行这里的回调函数 if (status = error) alert(status)。

3、; );function BindUnit_User() var val = $(#sel_unit option:selected).val();var mydata = org_id:+val+: /格式为json的参数，这中间最麻烦，最容易出错的也是拼接Json字符串，字符型参数的值要添加引号，而且对于用户输入的文本字段要对,/等进行特殊处理/var mydata = org_id:val:这种方式是错误的，会报“无效的JS基元”之类的错误。不过也可直接用$.toJSON(mydata )即可;参照jQuery的JSON插件：http:/code.google.com/p/jquery-。

4、json/ var thing =plugin: jquery-json, version2.2;/ var encoded=$.toJSON (thing);/plugin:jquery-json,version:2.2/ var name =$.evalJSON (encoded). plugin; /jquery-json/ var version = $.evalJSON(encoded).version;/ 2.2 $.ajax( type: POST,contentType: application/json,url: WebService.asmx/GetUnitUserDS,d。

5、ata: mydata, /传递给webservice方法的参数dataType: xml, /返回的类型为XMLsuccess: function(result) /成功时执行的方法/捕获处理过程中的异常并输出try $(#sel_unit_user).empty(); /清空下拉列表/遍历结果集，“Table”是结果集XML中节点名称，可以用fireBug查看$(result).find(Table).each(function(i) $(#sel_unit_user).append( + $(this).find(oru_name).text() + ););/ if (typeof (。

6、values) = string) / $(#sel_unit_user optionvalue= + values + ).attr(selected, true)/ catch (e) alert(e);return;,error: function(result, status) /出错时会执行这里的回调函数 if (status = error) alert(status);); 【WebService】:/返回DataSet需要设置，结果集将以XML格式返回客户端System.Web.Script.Services.ScriptMethod(ResponseFormat = Syst。

7、em.Web.Script.Services.ResponseFormat.Xml) WebMethodpublic DataSet GetUnitUserDS(string org_id)Test obj = new Test();return obj.GetUnitUser(Convert.ToInt32(org_id);System.Web.Script.Services.ScriptMethod(ResponseFormat = System.Web.Script.Services.ResponseFormat.Xml)WebMethodpublic DataSet GetUnitDS()Test obj = new Test();return obj.GetUnit();【下拉列表控件】OUOUU注意：var date = $(#txt_date).val();/html控件用此种方式取值，设置控件idvar date = $(#).val();/服务器控件并且套用了母版页用此种方式var date = $(.txt_date).val();/针对服务器控件还可设置控件的CssClass为txt_date，再用$(.txt_date).val()获取值。