功能:省,市,地區(qū)三級(jí)聯(lián)動(dòng),采用jquery ajax 取數(shù)據(jù)綁定,頁(yè)面刷新或提交后選定值能保存并保持選中狀態(tài)
把以下代碼放在一個(gè)單獨(dú)的js文件中,在頁(yè)面上引用即可調(diào)用
return cookieValue;
}
//保存cookie值
function writeCookie(name, value, hours, escp) {
var expire = "";
if (hours != null) {
expire = new Date((new Date()).getTime() + hours * 3600000);
expire = "; expires=" + expire.toGMTString();
}
if (escp == "True") {
document.cookie = name + "=" + value + expire;
} else {
document.cookie = name + "=" + escape(value) + expire;
}
}
//省市區(qū),流域,水系,斷面條件選擇
$(function() {
var $ddlprovince = $("#ddlProvince"); //省份
var $ddlcity = $("#ddlCity"); //城市
var $ddlarea = $("#ddlAreaName"); //區(qū)域
//根據(jù)省份查詢城市
//$ddlprovince.focus(); //不要加focus,否則設(shè)置selected有問(wèn)題
$ddlprovince.bind("change keyup", function() {
if ($(this).val() != "-1") {
loadWater($(this).val(), "SelectCity");
} else {
$("select[id$=ddlCity] > option").remove();
$ddlcity.append($("<option></option>").val("-1").html("--請(qǐng)選擇--"));
}
//從新選擇省份或者從新選擇城市都會(huì)初始化區(qū)域
$("select[id$=ddlAreaName] > option").remove();
$ddlarea.append($("<option></option>").val("-1").html("--請(qǐng)選擇--"));
});
//如果城市沒(méi)有填充數(shù)據(jù),省份有選擇數(shù)據(jù)則加載數(shù)據(jù)
if ($("select[id$=ddlCity] > option").length == 1 && $ddlprovince.val() != "-1") {
loadWater($ddlprovince.val(), "SelectCity");
//讀cookie,有值則設(shè)為選中狀態(tài)
var cityname = readCookie("JQ_CityName");
if (cityname != null && cityname != "undefined" && cityname != "") {
//$("select[id=ddlWaterXiName] > option:contains('" + watername + "')").attr("selected", "true");
$("select[id$=ddlCity] > option[value='" + cityname + "']").attr("selected", "true");
}
}
//根據(jù)城市查詢區(qū)域
//$ddlcity.focus();
$ddlcity.bind("change keyup", function() {
if ($(this).val() != "-1") {
loadWater($(this).val(), "SelectAreaName");
//選中值存cookie
writeCookie("JQ_CityName", $(this).val(), 0.5, true);
} else {
$("select[name$=ddlAreaName] > option").remove();
$ddlarea.append($("<option></option>").val("-1").html("--請(qǐng)選擇--"));
}
});
//如果區(qū)名沒(méi)有填充數(shù)據(jù),城市有選擇數(shù)據(jù)則加載數(shù)據(jù)
if ($("select[id$=ddlAreaName] > option").length == 1 && $ddlcity.val() != "-1") {
loadWater($ddlcity.val(), "SelectAreaName");
//讀cookie,有值則設(shè)為選中狀態(tài)
var areaname = readCookie("JQ_AreaName");
if (areaname != null && areaname != "undefined" && areaname != "") {
$("select[id=ddlAreaName] > option[value='" + areaname + "']").attr("selected", "true");
}
}
$ddlarea.bind("change keyup", function() {
if ($(this).val() != "-1") {
//選中值存cookie
writeCookie("JQ_AreaName", $(this).val(), 0.5, true);
}
});
});
function loadWater(selectedItem, typename) {
$.ajax({
type: "GET",
url: "/GetWaterxiname.ashx",
data: { usetype: typename, id: selectedItem },
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function Success(data) {
bindWater(data, typename);
}
});
}
function bindWater(data, typename) {
if (typename == "SelectCity") { //綁定城市
$("select[name$=ddlCity] > option").remove(); //刪除原有的option
$("select[id$=ddlCity]").append($("<option></option>").val("-1").html("--請(qǐng)選擇--"));
for (var i = 0; i < data.length; i++) {
$("select[id$=ddlCity]").append($("<option></option>").val(data[i].City).html(data[i].City));
}
}
else if (typename == "SelectAreaName") {
$("select[name$=ddlAreaName] > option").remove(); //刪除原有的option
$("select[id$=ddlAreaName]").append($("<option></option>").val("-1").html("--請(qǐng)選擇--"));
for (var i = 0; i < data.length; i++) {
$("select[id$=ddlAreaName]").append($("<option></option>").val(data[i].AreaName).html(data[i].AreaName));
}
}
}
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注