【Js代碼如下】:
<script src="Js/jquery-1.2.6.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(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: "{}", //即使參數(shù)為空,也需要設(shè)置
dataType: 'xml', //返回的類型為XML
success: function(result) { //成功時(shí)執(zhí)行的方法
//捕獲處理過程中的異常并輸出
try {
$("#sel_unit").empty();
$(result).find("Table").each(function(i) {
$("#sel_unit").append(" <option value='" + $(this).find("org_id").text() + "'>" + $(this).find("org_name").text() + "</option>");
});
BindUnit_User();
}
catch (e) {
alert(e);
return;
}
},
error: function(result, status) { //出錯(cuò)時(shí)會(huì)執(zhí)行這里的回調(diào)函數(shù)
if (status == 'error') {
alert(status);
}
}
});
}
function BindUnit_User() {
var val = $("#sel_unit option:selected").val();
var mydata = '{"org_id":"'+val+'"}': //格式為json的參數(shù),這中間最麻煩,最容易出錯(cuò)的也是拼接Json字符串,字符型參數(shù)的值要添加引號(hào),而且對(duì)于用戶輸入的文本字段要對(duì)',/等進(jìn)行特殊處理
//var mydata = {"org_id":val}:這種方式是錯(cuò)誤的,會(huì)報(bào)“無效的JSON基元”之類的錯(cuò)誤。不過也可直接用$.toJSON(mydata )即可;參照jQuery的JSON插件:http://code.google.com/p/jquery-json/
// var thing = {plugin: 'jquery-json', version: 2.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",
data: mydata, //傳遞給webservice方法的參數(shù)
dataType: 'xml', //返回的類型為XML
success: function(result) { //成功時(shí)執(zhí)行的方法
//捕獲處理過程中的異常并輸出
try {
$("#sel_unit_user").empty(); //清空下拉列表
//遍歷結(jié)果集,“Table”是結(jié)果集XML中<xs:element name="Table">節(jié)點(diǎn)名稱,可以用fireBug查看
$(result).find("Table").each(function(i) {
$("#sel_unit_user").append(" <option value='" + $(this).find("oru_id").text() + "'>" + $(this).find("oru_name").text() + "</option>");
});
// if (typeof (values) == "string") {
// $("#sel_unit_user option[value=" + values + "]").attr("selected", true)
// }
}
catch (e) {
alert(e);
return;
}
},
error: function(result, status) { //出錯(cuò)時(shí)會(huì)執(zhí)行這里的回調(diào)函數(shù)
if (status == 'error') {
alert(status);
}
}
});
}
</script>
【W(wǎng)ebService】:
//返回DataSet需要設(shè)置,結(jié)果集將以XML格式返回客戶端
[System.Web.Script.Services.ScriptMethod(ResponseFormat = System.Web.Script.Services.ResponseFormat.Xml)]
[WebMethod]
public 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)]
[WebMethod]
public DataSet GetUnitDS()
{
Test obj = new Test();
return obj.GetUnit();
}
【下拉列表控件】
<select id="sel_unit" name="sel_unit" style="width: 120px">
<option value="0">OU</option>
</select>
<select id="sel_unit_user" name="sel_unit_user" style="width: 120px">
<option value="0">OUU</option>
</select>
【附:針對(duì)Jquery獲取控件值的方式介紹三種常用方式】
var date = $("#txt_date").val();//html控件用此種方式取值,設(shè)置控件id
var date = $("#<%=txt_date.ClientID%>").val();//服務(wù)器控件并且套用了母版頁用此種方式
var date = $(".txt_date").val(); //針對(duì)服務(wù)器控件還可設(shè)置控件的CssClass為‘txt_date’,再用$(".txt_date").val()獲取值;
聯(lián)系客服