一个省市区三级联动菜单
<script>
var myproc = ["省1","省2","省3","省4"];
var mycity = new Array();
mycity[0] = ["省1市1","省1市2","省1市3","省1市4"];
mycity[1] = ["省2市1","省2市2","省2市3"];
mycity[2] = ["省3市1","省4市2"];
mycity[3] = ["省4市1","省4市2"];
var myregion = new Array();
myregion[0]=new Array();
myregion[1]=new Array();
myregion[2]=new Array();
myregion[3]=new Array();
myregion[0][0]=["省1市1区1","省1市1区2"];
myregion[0][1]=["省1市2区1","省1市2区2"];
myregion[0][2]=["省1市3区1","省1市3区2"];
myregion[0][3]=["省1市4区1","省1市4区2"];
myregion[1][0]=["省2市1区1","省2市1区2"];
myregion[1][1]=["省2市2区1","省2市2区2"];
myregion[1][2]=["省2市3区1","省2市3区2"];
myregion[2][0]=["省3市1区1","省3市1区2"];
myregion[2][1]=["省3市2区1","省3市2区2"];
myregion[3][0]=["省4市1区1","省4市1区2"];
myregion[3][1]=["省4市2区1","省4市2区2"];
function addproc(){
var proc = document.getElementById("proc");
for(var i=0; i<myproc.length; i++){
var op = document.createElement("option");
var city = document.createTextNode(myproc[i]);
op.appendChild(city);
proc.appendChild(op);
}
}
function selproc(){
var proc = document.getElementById("proc");
var city = document.getElementById("city");
var region = document.getElementById("region");
city.options.length=1;
region.options.length=1;
if(proc.value=="-1"){
document.getElementById("mytxt").value="";
}else{
var num = proc.options.selectedIndex;
for(var i=0; i<mycity[num-1].length; i++){
var op = document.createElement("option");
var city1 = document.createTextNode(mycity[num-1][i]);
op.appendChild(city1);
city.appendChild(op);
}
}
}
function selcity(){
var proc = document.getElementById("proc");
var city = document.getElementById("city");
var region = document.getElementById("region");
region.options.length=1;
if(proc.value=="-1"){
document.getElementById("mytxt").value="";
}else{
var num = proc.options.selectedIndex;
var n = city.options.selectedIndex;
for(var i=0; i<myregion[num-1][n-1].length; i++){
var op = document.createElement("option");
var r = document.createTextNode(myregion[num-1][n-1][i]);
op.appendChild(r);
region.appendChild(op);
}
}
}
</script>
</head>
<body onload="addproc()">
选择省市地区：
<select id="proc" name="proc" onchange="selproc()">
<option value="-1">--请选择省份--</option>
</select>
<select id="city" name="city" onchange="selcity()">
<option value="-1">--请选择城市--</option>
</select>
<select id="region" name="region" onchange="selregion()">
<option value="-1">--请选择地区--</option>
</select>
相关推荐
"Android省市区三级联动滚轮选择——Cascade_Master"是一个专门为解决这一问题而设计的组件。这个组件是从实际项目中提炼出来的，旨在提供一个高效、直观且易于集成的解决方案。 该组件是基于开源库`Android-wheel`...
省市区三级联动 , JavaScript 省市区三级联动 json文件,JavaScript 省市区三级联动 json文件
省市区三级联动数据库 省市区三级联动数据库,包含地区的区号、邮政编码以及区域的坐标位置信息。三级联动
在IT领域，"省市区三级联动"是一种常见的前端交互功能，尤其在地址选择、订单填写等场景中广泛应用。这个功能的实现通常涉及到后端数据的获取以及前端展示的逻辑处理，涉及的技术包括Java和JavaScript。这里我们将...
在移动端和H5开发中，省市区三级联动是一种常见的功能需求，主要用于地址选择，提供用户一个方便快捷的方式来选择他们的详细地址。本示例提供了一款适用于这两种平台的三级联动组件，下面将详细介绍这个功能及其实现...