SoFunction
Updated on 2025-04-06

Ajax-free province, city and district cascade based on jquery

I hope to study with you and find a good job. I am a PHP development engineer

The following is the code page

Copy the codeThe code is as follows:

<span rel="con_address" class="con_address">
#foreach($data in $)
<input type="hidden" rel="province" value="$data"/>
#end
#foreach($data in $)
<input type="hidden" rel="city" value="$data"/>
#end
#foreach($data in $)
<input type="hidden" rel="county" value="$data"/>
#end
<input type="hidden"/>

<select rel="city" name="city">
<option value="-1" rel="template">Please select</option>
</select>

<select rel="county" rel="template" name="county">
<option value="-1">Please select</option>
</select>
</span>

The following is the js code

There are strings that specifically store data
[code]
// JavaScript Document
$(document).ready(function(){
// Set up data cache Use HashMap method
cacheData(cityCountyStr);
cacheData(provinceCityStr);

$("select[rel='province']").change(dochangeSelect);
$("select[rel='city']").change(dochangeSelect);
setDefault();
});
function setDefault(){
$("[rel='con_address']").each(function(index){
//Set the default parameters saved
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 ;
}
//Get the next level all regions
var childrens = (thisName);
//Find the next select collection, ranking by province, city and district
var objThisSelect = $(obj).next().eq(0);
var template = $(objThisSelect).find("option").eq(0);
$(template).removeAttr("selected");
var childrensAttr = (",");
var keyVal = "";
for(var i=0;i<;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");
}

//Make the place name and database id into key-value pairs and cache into HashMap
function cacheData(datas){
var splitArr = ("&");
var temp = "";
var tempArr;
for(var i=0;i<;i++){
temp = splitArr[i];
tempArr = ("=");
(tempArr[0],tempArr[1]);
}
}