JQuery select form submit the core code of provincial urban and city level linkage

2020-03-30 03:15:24
OfStack

JQuery select form is submitted to the provincial, urban and city three-level linkage, which refers to the "jQuery -1.7.min" class library. The array of locale code query locale name exists in AreaData_min. Some codes are summarized as follows:

SelectArea. HTM file

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery select Form submission provincial city three - level linkage </title> 
<script src="jquery-1.7.min.js" type="text/javascript"></script> 
<script src="Area.js" type="text/javascript"></script> 
<script src="AreaData_min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function (){ 
initComplexArea('seachprov', 'seachcity', 'seachdistrict', area_array, sub_array, '44', '0', '0'); 
}); 

//Obtain area code
function getAreaID(){ 
var area = 0; 
if($("#seachdistrict").val() != "0"){ 
area = $("#seachdistrict").val(); 
}else if ($("#seachcity").val() != "0"){ 
area = $("#seachcity").val(); 
}else{ 
area = $("#seachprov").val(); 
} 
return area; 
} 

function showAreaID() { 
//Area code
var areaID = getAreaID(); 
//Region name
var areaName = getAreaNamebyID(areaID) ; 
alert(" Area code you selected: " + areaID + "  Area: " + areaName); 
} 

// Query by locale code Region name
function getAreaNamebyID(areaID){ 
var areaName = ""; 
if(areaID.length == 2){ 
areaName = area_array[areaID]; 
}else if(areaID.length == 4){ 
var index1 = areaID.substring(0, 2); 
areaName = area_array[index1] + " " + sub_array[index1][areaID]; 
}else if(areaID.length == 6){ 
var index1 = areaID.substring(0, 2); 
var index2 = areaID.substring(0, 4); 
areaName = area_array[index1] + " " + sub_array[index1][index2] + " " + sub_arr[index2][areaID]; 
} 
return areaName; 
} 
</script> 
</head> 
<body> 
<label> Please select provinces and cities: </label></br> 
<select id="seachprov" name="seachprov" onChange="changeComplexProvince(this.value, sub_array, 'seachcity', 'seachdistrict');"></select> 
<select id="seachcity" name="homecity" onChange="changeCity(this.value,'seachdistrict','seachdistrict');"></select> 
<span id="seachdistrict_div"><select id="seachdistrict" name="seachdistrict"></select></span> 

<input type="button" value=" Access to areas " onClick="showAreaID()"/> 

</body> 
</html>

Program download address:

(link: http://xiazai.jb51.net/201406/yuanma/jQueryselect.rar)

Effect:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201406/201406091010183.gif? 201459101034 ">