简易封装了一个省市区的三级联动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实现三级联动的效果
Jquery实现省市区/县三级联动的Javascript脚本
纯JS省市区三级联动,全国省市区用js实现三级下拉,直接引用js即可,后续更新版,重新封装指定设置省市区和初始化方法版本,实用性更强
js为封装了的.可以很方便使用。哈哈。省市区默认省下面是省会城市。
用jQuery自己封装了一个比较完整的三级联动,带有提示文本,自定义选中省市区,自定义提示文本内容等。city数据更新日期为2022年2月
let cityData = { "RECORDS": [ { "value": 110000, "label": "北京", "children": [{ "value": 110100, "label": "北京", "children": [{ "value": 110101, ...Ant Design组件三级联动资源库必备
包括 基于 纯js的省市县三级联动实现代码和封装好的js文件 基于 xml的省市县三级联动实现代码和封装好的xml文件 基于 数据库的省市县三级联动代码实例
国家省市联动-世界国家省市联动-(vue-mint-UI)- worldjson数据封装 - proviencejson数据封装
纯JS的省市县三级联动菜单,没有用到AJAX,直接连接数据库。
php省市区三级联动,内含省市区的相应数据库,三种实例方式用PHP--JQ--json数据,代码简单易懂,适合初学者参考借鉴
wpf全国省市区(包含港澳台)三级联动 本人已经封装成用户控件,引用后在LOAD事件中加上pCA1.PCALoad(); 就可以使用了了,获取省名称用pCA1.getProvincesText(); 设置省名称用pCA1.setProvincesText("广西壮族自治区")...
主要介绍了微信小程序 使用picker封装省市区三级联动实例代码的相关资料,需要的朋友可以参考下
该项目为一个整合hibernate与struts,利用json对象存放临时数据库数据,连接数据的三级联动;改项目使用ajax传递请求连接和参数;数据库结果为三表级联,三表之间依次都是多对一的关系;其中代码核心代码都附有详细...
简易的 layui 三级联动 使用只需要一行代码 封装到了layui模块 layui专用
NULL 博文链接:https://joinyo.iteye.com/blog/1161364
简单的封装地区的plist文件形成三级联动的省市区的地区选择器
包里有数据库文件,可以导入,包引入后用tomcat就能启动,servlet是通过JSP格式完成联动框,servlet02是通过json格式完成联动框,jdbc已经封装写好,用户名密码只需要改变数据库配置文件即可,Ajax也封装成js文件,...
json实现三级联动(省-市-县),包括sql文件。里面有自己封装的三个工具类,可以参考和使用。。。。。
目前发现picker的selector模式只有一级下拉,那么我们是否可以通过3个picker来实现三级联动模板的形式来引入其它页面中呢?答案是肯定可以的。那么我的思路是这样的: 1、使用template模板语法进行封装,数据从页面...