简易封装了一个省市区的三级联动js源代码，看客们可以扩展至4-6级
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta charset="utf-8"/>
<title> p_c_p </title>
</head>
<body>
<form method="post" action="" name="form1">
<select name="province" id="provice"></select>
<select name="city" id="city"></select>
<select name="city" id="prefecture"></select>
</form>
<script type="text/javascript" src="../js/get.js"></script>
<script type="text/javascript" src="p_c_p.js"></script>
<script language="JavaScript" type="text/javascript">
window.onload=function(){
/*获取三级联动的dom对象*/
var p=getId("provice");//省
var c=getId("city");//市
var pre=getId("prefecture");//区/县
p_c_p(p,c,pre);//直接调用封装好的方法即可,如果有扩展,可在下面继续增加change方法,然后调用相应的createElemenrts方法基于下标查找创建即可。
}
</script>
</body>
</html>
//创建一个联动的类,一个属性数组
function provice_city_prefecture(){this.Items=[];}
根据id给数组添加省,市，区的内容
provice_city_prefecture.prototype.add=function(id,name){
this.Items[id]=name;
}
//new一个对象,准备执行add方法根据id添加联动内容
var provice=new provice_city_prefecture();
function p_c_p(obj_1,obj_2,obj_3){
/*默认情况下第一行省*/
createElements(obj_1,provice.Items[0]);
/*默认情况下第一行市*/
createElements(obj_2,provice.Items["0_0"]);
/*默认情况下第一行区县*/
createElements(obj_3,provice.Items["0_0_0"]);
//开始联动根据不同的省找出与之对应的城市
obj_1.onchange=function(){
/*每点一个省时，显示那个省的 省名 省会城市名 省会城市的第一个区/县名*/
createElements(obj_2,provice.Items["0_"+this.selectedIndex]);
/*默认情况下第一行区县*/
createElements(obj_3,provice.Items["0_"+this.selectedIndex+"_0"]);
}
//市级联动
obj_2.onchange=function(){
change(obj_3,obj_1.selectedIndex,this.selectedIndex);
}
}
/*change 事件*/
function change(){
var str="0";//初始化str索引
var child=getTagName(arguments[0],"option");
if(arguments.length<3){
str+="_"+arguments[1];
var items=provice.Items[str];
createElements(arguments[0],items);
}else if(arguments.length>=3){
str+="_"+arguments[1]+"_"+arguments[2];
var items=provice.Items[str];
createElements(arguments[0],items);
}
}
function createElements(obj,items){
// 首先判断obj是否有option子节点,如果有，则先进行清除
var child=getTagName(obj,"option");
if(child.length!=0){
for(var i=child.length-1;i>-1;i--){
obj.removeChild(child[i]);
}
}
/*创建option*/
for(var i=0,j=items.length;i<j;i++){
var option=document.createElement("option");
option.innerHTML=items[i];
obj.appendChild(option);
}
}
/*下面部分为网上贴的*/
provice.add("0",["安徽","北京","福建","陕西"]);
provice.add("0_0",["安庆","蚌埠","巢湖","池州","滁州","阜阳","合肥","淮北","淮南","黄山","六安","马鞍山","宿州","铜陵","芜湖","宣城","亳州"]);
provice.add("0_1",["北京"]);
provice.add("0_2",["福州","龙岩","南平","宁德","莆田","泉州","三明","厦门","漳州"]);
provice.add("0_3",["西安","渭南","铜川","商洛","咸阳","宝鸡"]);
provice.add("0_0_0",["安庆市","怀宁县","潜山县","宿松县","太湖县","桐城市","望江县","岳西县","枞阳县"]);
provice.add("0_0_1",["蚌埠市","固镇县","怀远县","五河县"]);
provice.add("0_0_2",["巢湖市","含山县","和县","庐江县","无为县"]);
provice.add("0_0_3",["池州市","东至县","青阳县","石台县"]);
provice.add("0_0_4",["滁州市","定远县","凤阳县","来安县","明光市","全椒县","天长市"]);
provice.add("0_0_5",["阜南县","阜阳市","界首市","临泉县","太和县","颖上县"]);
provice.add("0_0_6",["长丰县","肥东县","肥西县"]);
provice.add("0_0_7",["淮北市","濉溪县"]);
provice.add("0_0_8",["凤台县","淮南市"]);
provice.add("0_0_9",["黄山市","祁门县","休宁县","歙县","黟县"]);
provice.add("0_0_10",["霍邱县","霍山县","金寨县","六安市","寿县","舒城县"]);
provice.add("0_0_11",["当涂县","马鞍山市"]);
provice.add("0_0_12",["灵璧县","宿州市","萧县","泗县","砀山县"]);
provice.add("0_0_13",["铜陵市","铜陵县"]);
provice.add("0_0_14",["繁昌县","南陵县","芜湖市","芜湖县"]);
provice.add("0_0_15",["广德县","绩溪县","郎溪县","宁国市","宣城市","泾县","旌德县"]);
provice.add("0_0_16",["利辛县","蒙城县","涡阳县","亳州市"]);
provice.add("0_1_0",["北京市","密云县","延庆县"]);
provice.add("0_2_0",["长乐市","福清市","福州市","连江县","罗源县","闽侯县","闽清县","平潭县","永泰县"]);
provice.add("0_2_1",["长汀县","连城县","龙岩市","上杭县","武平县","永定县","漳平市"]);
provice.add("0_2_2",["光泽县","建阳市","建瓯市","南平市","浦城县","邵武市","顺昌县","松溪县","武夷山市","政和县"]);
provice.add("0_2_3",["福安市","福鼎市","古田县","宁德市","屏南县","寿宁县","霞浦县","周宁县","柘荣县"]);
provice.add("0_2_4",["莆田市","仙游县"]);
provice.add("0_2_5",["安溪县","德化县","惠安县","金门县","晋江市","南安市","泉州市","石狮市","永春县"]);
provice.add("0_2_6",["大田县","建宁县","将乐县","明溪县","宁化县","清流县","三明市","沙县","泰宁县","永安市","尤溪县"]);
provice.add("0_2_7",["厦门市"]);
provice.add("0_2_8",["长泰县","东山县","华安县","龙海市","南靖县","平和县","云霄县","漳浦县","漳州市","诏安县"]);
provice.add("0_3_0",["高陵县","户县","蓝田县","西安市","周至县"]);
provice.add("0_3_1",["白水县","澄城县","大荔县","富平县","韩城市","合阳县","华县","华阴市","蒲城县","渭南市","潼关县"]);
provice.add("0_3_2",["铜川市","宜君县"]);
provice.add("0_3_3",["丹凤县","洛南县","山阳县","商洛市","商南县","镇安县","柞水县"]);
provice.add("0_3_4",["彬县","长武县","淳化县","礼泉县","乾县","三原县","武功县","咸阳市","兴平市","旬邑县","永寿县","泾阳县"]);
provice.add("0_3_5",["宝鸡县","凤县","凤翔县","扶风县","陇县","眉县","千阳县","太白县","岐山县","麟游县"]);
get.js 用到的方法
function getId(name){
if(typeof name=="string"){
return document.getElementById(name);
}
}
function getTagName(){
if(arguments.length<1){
document.getElementsByTagName(arguments[0]);
}else if(arguments.length>1){
if((typeof arguments[0]=="object") && (typeof arguments[1]=="string")){
return arguments[0].getElementsByTagName(arguments[1]);
}
}
}
相关推荐
标题"纯JS省市区三级联动,全国省市区用js实现三级下拉,直接引用js即可,后续更新版"表明这是一个基于JavaScript编写的、用于实现全国范围内的省市区三级联动效果的代码库。它强调了“纯JS”，意味着不依赖任何外部...
在移动端开发中，省市区三级联动选择器是一个常见的功能，用于收集用户所在的地理位置信息。它通常出现在注册、地址填写等场景中，用户依次选择省份、城市和区县，这三个选项之间存在联动关系，即选择一个省份后，...
在Android开发中，有时我们需要实现一个功能，让用户能够选择省份、城市和区县，这种功能被称为省市区三级联动选择。这个功能通常用于地址输入或定位服务。在这个特定的案例中，开发者参考了一个开源项目——...
省市区三级联动是Web开发中常见的一种功能设计，主要用于用户输入地址时提供便捷的选择体验。在移动端应用中，由于屏幕空间有限，这种交互方式尤为重要，能够有效地减少用户的操作步骤，提高用户体验。本资源主要...
省市区3级联动数据，包含港澳台下的市区，可用于 ant design 下的各个组件库
压缩包中的“js全国城市三级联动下拉列表”可能包含了一个JavaScript文件，该文件已经封装了上述逻辑。我们可以引入这个JS文件到HTML中，通过调用提供的函数初始化和绑定事件，如： ```html 全国城市三级联动下拉...
Jquery实现省市区/县三级联动的Javascript脚本
在IT领域，尤其是在前端开发中，"省市县三级联动"是一种常见的功能，它涉及到用户界面中的下拉选择框，用于选择国家、省份、城市及区县等地理信息。这种功能通常应用于地址输入、物流配送、门店查找等场景，提供用户...
在用户界面上，用户将看到三个下拉列表，分别对应省份、城市和区县，当用户在上一级选择时，下一级会根据选择自动更新。 `City` 文件可能是一个类或者数据结构，用于存储城市的信息，包括城市ID、名称和所属省份等...
在IT领域，尤其是在前端开发中，"jquery省市区三级联动"是一个常见的需求，主要用于实现用户在选择地址时的交互体验。这个功能允许用户先选择省份，接着根据省份选择城市，最后选择区县，形成一个完整的地址。在这个...
在这个场景中，省、市、区三个选择框构成三级联动。 - **JavaScript**：一种轻量级的脚本语言，广泛用于网页和应用程序，用于动态更新内容，处理用户输入等。 2. **实现原理**： - **事件监听**：JS通过...
本文将深入探讨一个基于JQuery的省市区三级联动实现方案，该方案不仅代码精简且功能强大，特别适用于需要用户选择地理位置的Web应用。通过前端与后端的紧密协作，能够动态加载省、市、区的信息，提升用户体验的同时...
在IT行业中，省市区三级联动是一种常见的前端交互功能，它常用于地址选择或者地理位置筛选等场景。本项目基于Ajax、MySQL数据库和JSP技术实现这一功能，为用户提供流畅且便捷的下拉选择体验。 首先，我们需要理解每...
在IT行业中，数据库设计是至关重要的，特别是在处理地理信息或者用户地址时，"省市区三级联动"是一个常见的需求。这个需求通常出现在用户注册、订单填写、物流配送等场景，允许用户按照省级-市级-区县级的顺序逐级...
在微信小程序开发中，"小程序城市选择器省市区三级联动"是一个常见的功能需求，它允许用户在界面上方便地选择省份、城市和区县，通常用于地址填写、服务范围选择等场景。这个功能的实现主要依赖于JavaScript编程，...
在前端开发中，"js省市区三级联动"是一种常见的交互设计，主要用于地址选择。它涉及到JavaScript（js）的DOM操作、事件处理以及数据结构的管理。在这个系统中，用户在选择省份时，市和区的选择会随之更新，展示与所...
在IT行业中，尤其是在前端开发领域，经常会遇到需要实现省市区三级联动的需求，即用户选择一个省份后，下拉框会自动加载对应的市，接着选择市后，再动态加载出相应的区。这种功能常见于地址填写、订单配送等场景。...
本项目主要关注中国省市县的三级联动，但同时提供了全球国家的数据支持。 `worldjson.js`文件很可能是包含全球国家和地区信息的JSON数据源。在这样的数据结构中，通常会有各国的ID、名称、以及下属的省份信息等字段...
在Android开发中，"省市区三级联动Demo"是一种常见的需求，尤其在地址选择、信息填写等场景中。这个项目提供了一个实现三级联动效果的实例，包括使用Fragment和Pop两种方式，方便开发者理解和应用。 首先，我们要...
在Android开发中，"省市区三级联动"是一个常见的需求，特别是在构建地址选择功能时。它模仿了iOS中的类似设计，允许用户逐级选择省份、城市和区县，以完成一个完整的地址输入。在这个过程中，"wheelview"组件常被...