jquery比较少间的国家省市县选择表单代码打包下载

代码笔记       77.2KB      2018-08-20 09:18:36    
一般我们常见的代码都是省市县最多了,这套代码包含了国家-省市县比一般的代码多了国家部分.




除了jquery部分外还需要引用的几个文件包括worldAddress.js,TestAddress.js,TestChooseAddress.js,国家,省市县的数据就在TestAddress.js里面,如果要修改或者添加就需要修改TestAddress.js文件.




JS代码

var s = [ "s1", "s2", "s3" ];
var opt0 = [ "国家", "省份、州", "地级市、县" ];
function setup() {
 
change(0);
}
 
function loadProvince(regionId) {
$("#id_provSelect").html("");
$("#id_provSelect").append("<option value=''>请选择省份</option>");
var jsonStr = getAddress(regionId, 0);
for ( var k in jsonStr) {
$("#id_provSelect").append(
"<option value='"+k+"'>" + jsonStr[k] + "</option>");
}
if (regionId.length != 6) {
$("#id_citySelect").html("");
$("#id_citySelect").append("<option value=''>请选择城市</option>");
$("#id_areaSelect").html("");
$("#id_areaSelect").append("<option value=''>请选择区域</option>");
} else {
$("#id_provSelect").val(regionId.substring(0, 2) + "0000");
 
}
}
 
function loadCity(regionId) {
$("#id_citySelect").html("");
$("#id_citySelect").append("<option value=''>请选择城市</option>");
if (regionId.length != 6) {
$("#id_areaSelect").html("");
$("#id_areaSelect").append("<option value=''>请选择区域</option>");
} else {
var jsonStr = getAddress(regionId, 1);
for ( var k in jsonStr) {
$("#id_citySelect").append(
"<option value='"+k+"'>" + jsonStr[k] + "</option>");
}
if (regionId.substring(2, 6) == "0000") {
$("#id_areaSelect").html("");
$("#id_areaSelect").append("<option value=''>请选择区域</option>");
} else {
$("#id_citySelect").val(regionId.substring(0, 4) + "00");
 
}
}
}
 
function loadArea(regionId) {
$("#id_areaSelect").html("");
$("#id_areaSelect").append("<option value=''>请选择区域</option>");
if (regionId.length == 6) {
var jsonStr = getAddress(regionId, 2);
for ( var k in jsonStr) {
$("#id_areaSelect").append(
"<option value='"+k+"'>" + jsonStr[k] + "</option>");
}
if (regionId.substring(4, 6) != "00") {
$("#id_areaSelect").val(regionId);
}
}
}
function getCountry() {
change(1);
var country = document.getElementById("s1");
var province = document.getElementById("s2");
var city = document.getElementById("s3");
var provSelect = document.getElementById("id_provSelect");
var citySelect = document.getElementById("id_citySelect");
var areaSelect = document.getElementById("id_areaSelect");
if (country.value == "中国") {
loadProvince('440116');
provSelect.style.display = "block";
province.style.display = "none";
city.style.display = "none";
} else {
province.style.display = "block";
provSelect.style.display = "none";
citySelect.style.display = "none";
areaSelect.style.display = "none";
}
}
function getChinaProv(regionId) {
document.getElementById("id_citySelect").style.display = "block";
loadCity(regionId);
}
function getChinaCity(regionId) {
document.getElementById("id_areaSelect").style.display = "block";
loadArea(regionId);
}
function getProvince() {
change(2);
var province = document.getElementById("s2");
var city = document.getElementById("s3");
city.style.display = 'block';
}
function stampUpload() {
var file = document.getElementById("file");
var country = $("#s1");
var state = $("#s2");
var area = $("#s3");
var chinaProvince = $("#id_provSelect").find("option:selected");
var chinaCity = $("#id_citySelect").find("option:selected");
var chinaArea = $("#id_areaSelect").find("option:selected");
if (file.value == "") {
alert("请选择一张邮票!")
} else if (country.val() == "国家") {
alert("请选择一个国家!");
} else if (country.val() == "中国"){
alert(country.val()+","+chinaProvince.text()+","+chinaCity.text()+","+chinaArea.text());
}

}


HTML部分

<body bgcolor="#E0E0E0" onLoad="setup()" style="margin: 0">
<center>
<div>
<form name="form1" method="post" enctype="multipart/form-data">
<table id="tab">
<tr>
<td><font size="3" face="楷体"></font></td>
<td><select id="s1" onchange="getCountry()"><option>请选择国家</option></select></td>
<td><select id="s2" onchange="getProvince()" style="display: none"><option>省份、州</option></select> <select id="id_provSelect" name="provSelect" style="display: none" onChange="getChinaProv(this.value);"><option>请选择省份</option></select>
</td>
<td><select id="s3" style="display: none"><option>地级市、县</option></select>
<select id="id_citySelect" name="citySelect" style="display: none" onChange="getChinaCity(this.value);"><option>请选择城市</option></select>
</td>
<td><select id="id_areaSelect" name="areaSelect" style="display: none"><option>请选择区域</option></select></td>
</tr>
</table>
</form>
</div>
</center>
</body>

加入收藏夹,可以参考学习的代码,算的上是4级联动代码了哦

效果预览 下载地址 打赏