<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Province_three</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
font: 400 12px/1.5 Arial,"Lucida Grande",Verdana,"Microsoft YaHei";
}
body{
padding: 50px;
}
select{
margin-right: 5px;
}
</style>
</head>
<body>
<script>
window.onload = function(){
//
var aProvince = [
"浙江省",
"江苏省",
"广东省"
]
var aCity = [
["杭州市","宁波市","舟山市","温州市","绍兴市"],
["苏州市","南京市"],
["广州市","深圳市"]
]
var aArea = [
[
["滨江区","西湖区","上城区"],
["海曙区","江东区","鄞州区","江北区"],
["定海区"],
["温岭区"],
["柯桥区"]
],
[
["吴中区"],
["鼓楼区"]
],
[
["越秀区","海珠区"],
["宝安区","龙岗区"]
]
]
//fn
function fnAddOption(innerH,target,isClear){
var oOption = document.createElement("option");
oOption.value = innerH;
oOption.innerHTML = innerH;
//clearOptions
if(isClear){
var tLength = target.children.length;
for(var i=0; i<tLength; i++){
target.removeChild(target.children[0]);
}
}
target.appendChild(oOption);
}
function fnGetProvince(ele,initP,initC,initA){
ele.innerHTML = ‘<select><option>--选择省--</option></select><select><option>--选择市--</option></select><select><option>--选择区--</option></select>‘;
var oSelect1 = ele.getElementsByTagName("select")[0];
var oSelect2 = ele.getElementsByTagName("select")[1];
var oSelect3 = ele.getElementsByTagName("select")[2];
for(var i=0; i<aProvince.length; i++){
fnAddOption(aProvince[i],oSelect1);
//initP
if(typeof(initP)!="undefined" && initP == aProvince[i]){
oSelect1.getElementsByTagName("option")[i+1].setAttribute("selected",true);
onchangeS1();
//initC
if(typeof(initC)!="undefined"){
var oOptions = oSelect2.getElementsByTagName("option");
for(var j=0; j<oOptions.length; j++){
if(initC == oOptions[j].innerHTML){
oOptions[j].setAttribute("selected",true);
onchangeS2();
//initA
if(typeof(initA)!="undefined"){
var oOptions = oSelect3.getElementsByTagName("option");
for(var k=0; k<oOptions.length; k++){
if(initA == oOptions[k].innerHTML){
oOptions[k].setAttribute("selected",true);
}
}
}
}
}
}
}
//init end
}
//select1 onchange event
function onchangeS1(){
var sIndex = oSelect1.selectedIndex;
fnAddOption("--选择市--",oSelect2,true);
fnAddOption("--选择区--",oSelect3,true);
if(sIndex==0){
return;
}
for(var i=0; i<aCity[sIndex-1].length; i++){
fnAddOption(aCity[sIndex-1][i],oSelect2);
}
}
oSelect1.onchange = onchangeS1;
//select2 onchange event
function onchangeS2(){
var sIndex = oSelect1.selectedIndex;
var sCityIndex = oSelect2.selectedIndex;
fnAddOption("--选择区--",oSelect3,true);
if(sCityIndex==0){
return;
}
for(var i=0; i<aArea[sIndex-1][sCityIndex-1].length; i++){
fnAddOption(aArea[sIndex-1][sCityIndex-1][i],oSelect3);
}
}
oSelect2.onchange = onchangeS2;
}
//get fn
var oDiv = document.getElementById("div1");
fnGetProvince(oDiv,"广东省","深圳市","龙岗区");
}
</script>
<div id="div1"></div>
</body>
</html>
下面是二级省市选择：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Province_Two</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
font: 400 12px/1.5 Arial,"Lucida Grande",Verdana,"Microsoft YaHei";
}
body{
padding: 50px;
}
select{
margin-right: 5px;
}
</style>
</head>
<body>
<script>
window.onload = function(){
//
var aProvince = [
"浙江省",
"江苏省",
"广东省"
]
var aCity = [
["杭州市","宁波市","舟山市","温州市","绍兴市"],
["苏州市","南京市"],
["广州市","深圳市"]
]
//fn
function fnAddOption(innerH,target){
var oOption = document.createElement("option");
oOption.value = innerH;
oOption.innerHTML = innerH;
target.appendChild(oOption);
}
function fnGetProvince(ele){
ele.innerHTML = ‘<select><option>--请选择--</option></select><select><option>--请选择--</option></select>‘;
var oSelect1 = ele.getElementsByTagName("select")[0];
var oSelect2 = ele.getElementsByTagName("select")[1];
for(var i=0; i<aProvince.length; i++){
fnAddOption(aProvince[i],oSelect1);
}
//select onchange event
oSelect1.onchange = function(){
var sIndex = oSelect1.selectedIndex;
var sOption = oSelect1[sIndex];
oSelect2.innerHTML="";
if(sIndex==0){
fnAddOption("--请选择--",oSelect2);
return;
}
for(var i=0; i<aCity[sIndex-1].length; i++){
fnAddOption(aCity[sIndex-1][i],oSelect2);
}
}
}
//get fn
var oDiv = document.getElementById("div1");
fnGetProvince(oDiv);
}
</script>
<div id="div1"></div>
</body>
</html>
时间： 2024-10-10 06:25:18