基于jquery實(shí)現(xiàn)的省市區(qū)級(jí)聯(lián)無(wú)ajax
希望和大家一起學(xué)習(xí),更希望能找一份好工作,我是PHP開(kāi)發(fā)工程師
以下是代碼頁(yè)面
<span rel="con_address" class="con_address">
#foreach($data in $conAddressBean.provinceCode)
<input type="hidden" rel="province" value="$data"/>
#end
#foreach($data in $conAddressBean.cityCode)
<input type="hidden" rel="city" value="$data"/>
#end
#foreach($data in $conAddressBean.countyCode)
<input type="hidden" rel="county" value="$data"/>
#end
<input id="dataCache" type="hidden"/>
<select rel="city" name="city">
<option value="-1" rel="template">請(qǐng)選擇</option>
</select>
<select rel="county" rel="template" name="county">
<option value="-1">請(qǐng)選擇</option>
</select>
</span>
以下是js代碼
其中有專門(mén)保存數(shù)據(jù)的字符串
[code]
// JavaScript Document
$(document).ready(function(){
// 設(shè)置數(shù)據(jù)緩存 使用HashMap方式
cacheData(cityCountyStr);
cacheData(provinceCityStr);
$("select[rel='province']").change(dochangeSelect);
$("select[rel='city']").change(dochangeSelect);
setDefault();
});
function setDefault(){
$("[rel='con_address']").each(function(index){
//設(shè)置省的默認(rèn)參數(shù)
var currentProValue = getCurrentValue("province",index);
setValue($(this),"province",index,currentProValue);
var currentCity = getCurrentValue("city",index);
doLoadSelect($(this).find("select[rel='province']"),currentCity);
var currentCounty = getCurrentValue("county",index);
doLoadSelect($(this).find("select[rel='city']"),currentCounty);
});
}
function getCurrentValue(relName,index){
return $("[rel='con_address']").eq(0).find("[rel='"+relName+"']:hidden").eq(index).attr("value");
}
function setValue(parsent,name,index,currentValue){
$(parsent).find("select[rel='"+name+"'] > option").each(function(){
if($(this).attr("value")==currentValue){
$(this).attr("selected","selected");
return false;
}
})
}
function doLoadSelect(obj,nexeDetaultValue){
var thisName = $(obj).find("option:selected").text();
var thisValue = $(obj).find("option:selected").attr("value");
//alert("thisName="+thisName+" thisValue="+thisValue);
$(obj).nextAll().each(function(){
$(this).find("option").eq(0).nextAll().remove();
});
if(thisValue=='-1'){
return ;
}
//獲取下一級(jí) 所有的地區(qū)
var childrens = hashMap.Get(thisName);
//找到下一個(gè)select集合,按照省市區(qū) 排名的
var objThisSelect = $(obj).next().eq(0);
var template = $(objThisSelect).find("option").eq(0);
$(template).removeAttr("selected");
var childrensAttr = childrens.split(",");
var keyVal = "";
for(var i=0;i<childrensAttr.length;i++){
keyVal = childrensAttr[i].split(":");
var result = $(template).clone(true);
$(result).html(keyVal[0]);
$(result).attr("value",keyVal[1]);
if(nexeDetaultValue==keyVal[1]){
$(result).attr("selected","selected");
}
$(objThisSelect).append(result);
}
}
function dochangeSelect(){
doLoadSelect(this,"-1");
}
//將地名和數(shù)據(jù)庫(kù)id做成鍵值對(duì),cache到HashMap中
function cacheData(datas){
var splitArr = datas.split("&");
var temp = "";
var tempArr;
for(var i=0;i<splitArr.length;i++){
temp = splitArr[i];
tempArr = temp.split("=");
hashMap.Set(tempArr[0],tempArr[1]);
}
}
相關(guān)文章
JavaScript函數(shù)重載操作實(shí)例淺析
這篇文章主要介紹了JavaScript函數(shù)重載操作,結(jié)合一次面試經(jīng)歷分析了JavaScript函數(shù)重載相關(guān)原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-05-05JavaScript實(shí)現(xiàn)擦玻璃效果分析鼠標(biāo)移動(dòng)響應(yīng)時(shí)間粒度問(wèn)題
這篇文章主要為大家介紹了JavaScript實(shí)現(xiàn)擦玻璃效果分析鼠標(biāo)移動(dòng)響應(yīng)時(shí)間粒度問(wèn)題詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10setTimeout()遞歸調(diào)用不加引號(hào)出錯(cuò)的解決方法
用了setTimeout()想實(shí)現(xiàn)遞歸調(diào)用,如果第一個(gè)參數(shù)不加引號(hào)的話,就會(huì)出錯(cuò),下面與大家分享下該如何解決2014-09-09JavaScript中調(diào)用函數(shù)的4種方式代碼實(shí)例
這篇文章主要介紹了JavaScript中調(diào)用函數(shù)的4種方式代碼實(shí)例,本文分別給出方法調(diào)用模式、函數(shù)調(diào)用模式、構(gòu)造器調(diào)用模式、apply調(diào)用模式4種方式的代碼實(shí)例,需要的朋友可以參考下2015-07-07原生JS寫(xiě)Ajax的請(qǐng)求函數(shù)功能
本文給大家分享一個(gè)自己寫(xiě)的基于原生JS寫(xiě)Ajax的請(qǐng)求函數(shù)功能,需要的朋友可以參考下2017-12-12In Javascript Class, how to call the prototype method.(three
In Javascript Class, how to call the prototype method.(three method)...2007-01-01JavaScript中創(chuàng)建原子的方法總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript中創(chuàng)建原子的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08