jquery ajax實(shí)現(xiàn)下拉框三級(jí)無(wú)刷新聯(lián)動(dòng),且保存保持選中值狀態(tài)
功能:省,市,地區(qū)三級(jí)聯(lián)動(dòng),采用jquery ajax 取數(shù)據(jù)綁定,頁(yè)面刷新或提交后選定值能保存并保持選中狀態(tài)
把以下代碼放在一個(gè)單獨(dú)的js文件中,在頁(yè)面上引用即可調(diào)用
//獲取cookie值
function readCookie(name) {
var cookieValue = "";
var search = name + "=";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
cookieValue = unescape(document.cookie.substring(offset, end))
}
}
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ù)省份查詢(xún)城市
//$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ù)城市查詢(xún)區(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));
}
}
}
說(shuō)明:省份數(shù)據(jù)在頁(yè)面加載時(shí)綁定,頁(yè)面提交后 省份值可以用 selectvalue取,市,區(qū)選中數(shù)據(jù)要用 Request["idname"] 獲取
- jQuery模擬原生態(tài)App上拉刷新下拉加載更多頁(yè)面及原理
- jquery使用iscorll實(shí)現(xiàn)上拉、下拉加載刷新
- JQuery插件iScroll實(shí)現(xiàn)下拉刷新,滾動(dòng)翻頁(yè)特效
- jQuery+AJAX實(shí)現(xiàn)無(wú)刷新下拉加載更多
- 用Jquery實(shí)現(xiàn)多級(jí)下拉框無(wú)刷新的聯(lián)動(dòng)
- 基于jQuery Ajax實(shí)現(xiàn)下拉框無(wú)刷新聯(lián)動(dòng)
- jQuery 翻頁(yè)組件yunm.pager.js實(shí)現(xiàn)div局部刷新的思路
- jquery刷新頁(yè)面的實(shí)現(xiàn)代碼(局部及全頁(yè)面刷新)
- 用Jquery.load載入頁(yè)面實(shí)現(xiàn)局部刷新
- jQuery實(shí)現(xiàn)AJAX定時(shí)刷新局部頁(yè)面實(shí)例
- JQuery+Ajax無(wú)刷新分頁(yè)的實(shí)例代碼
- jQuery實(shí)現(xiàn)的上拉刷新功能組件示例
相關(guān)文章
jquery.autocomplete修改實(shí)現(xiàn)鍵盤(pán)上下鍵自動(dòng)填充示例
根據(jù)需求要實(shí)現(xiàn)通過(guò)鍵盤(pán)上下移動(dòng),獲得聯(lián)想菜單中的值,如同google baidu的查詢(xún)功能,下面的代碼是自己手寫(xiě)的,喜歡的朋友可以嘗試操作下2013-11-11
利用jQuery實(shí)現(xiàn)CheckBox全選/全不選/反選的簡(jiǎn)單代碼
下面小編就為大家?guī)?lái)一篇利用jQuery實(shí)現(xiàn)CheckBox全選/全不選/反選的簡(jiǎn)單代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
jquery基礎(chǔ)教程之?dāng)?shù)組使用詳解
jQuery的數(shù)組處理、便捷、功能齊全。一步到位的封裝了很多原生JavaScript數(shù)組不能企及的功能。下面是jquery數(shù)組的使用詳解,需要的朋友可以參考下2014-03-03
jQuery實(shí)現(xiàn)長(zhǎng)按按鈕觸發(fā)事件的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)長(zhǎng)按按鈕觸發(fā)事件的方法,可應(yīng)用于手機(jī)端應(yīng)用程序的開(kāi)發(fā)中,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
使用jQuery中的when實(shí)現(xiàn)多個(gè)AJAX請(qǐng)求對(duì)應(yīng)單個(gè)回調(diào)的例子分享
我在為 Mozilla Developer Network(Mozilla開(kāi)發(fā)者社區(qū)) 寫(xiě)代碼時(shí)需要加載的一個(gè)普通的的腳本文件,以及一個(gè)JSON流。 因?yàn)槲覀兪褂胘Query,這意味著需要調(diào)用 jQuery.getScript 和 jQuery.getJSON 函數(shù)2014-04-04
利用jQuery實(shí)現(xiàn)WordPress中@的ID懸浮顯示評(píng)論內(nèi)容
這篇文章主要介紹了使用JavaScript實(shí)現(xiàn)WordPress中ID懸浮顯示評(píng)論的功能,就是在樓中樓式的評(píng)論中顯示被評(píng)論的主體內(nèi)容,需要的朋友可以參考下2015-12-12
jQuery調(diào)用ajax請(qǐng)求的常見(jiàn)方法匯總
這篇文章主要介紹了jQuery調(diào)用ajax請(qǐng)求的常見(jiàn)方法,實(shí)例匯總了三種常見(jiàn)的jQuery調(diào)用Ajax的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jquery autocomplete自動(dòng)完成插件的的使用方法
最近剛開(kāi)始學(xué)jquery,想實(shí)現(xiàn)類(lèi)似GOOGLE搜索時(shí)自動(dòng)顯示出相關(guān)結(jié)果的效果。于是選擇了使用jquery autocomplete插件。2010-08-08
jQuery實(shí)現(xiàn)仿QQ在線(xiàn)客服效果的滾動(dòng)層代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿QQ在線(xiàn)客服效果的滾動(dòng)層代碼,可實(shí)現(xiàn)實(shí)時(shí)讀取屏幕高度并顯示的功能,涉及jQuery響應(yīng)滾動(dòng)事件及定時(shí)操作的相關(guān)技巧,需要的朋友可以參考下2015-10-10

