首页 > 编程语言 >jQuery实现省级联动效果——源码

jQuery实现省级联动效果——源码

时间:2023-03-06 18:33:00浏览次数:56  
标签:jQuery city name district -- 源码 联动 var option


一、效果图

jQuery实现省级联动效果——源码_省级联动

二、index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现省级联动</title>
</head>
<body>

<div>
<select id="province" name="province">
<option value="">--请选择--</option>
</select>省
<select id="city" name="city">
<option value="">--请选择--</option>
</select>市
<select id="district" name="district">
<option value="">--请选择--</option>
</select>区/县

</div>

<script type="text/javascript" src="js/data.js" ></script>
<script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>

<script>

$(document).ready(function(){
var $province = $("#province");
var $city = $("#city");
var $district = $("#district");
var option = "";
// 默认禁用城市和区县乡下拉框
$city.attr("disabled", true);//属性设置为true和disabled都可以
$district.attr("disabled", "disabled");

/*
* 加载所有省份
*/
for (var i = 0; i < proviceJson.length; i++) {
option += "<option value=\""+i+"\">"+proviceJson[i].name+"</option>"
}
$province.append(option);

/*
* 根据省份获取城市
*/
$province.change(function() {
option = "<option value=''>--请选择--</option>";
// 激活城市下拉框
$city.attr("disabled", false);
// 清空城市下拉框
$city.empty();
// 清空区县乡下拉框,并添加默认"--请选择--"选项
$district.empty();
$district.append(option);
// 获取省份下的城市数组
var proVal = $(this).val();
var cityArr = proviceJson[proVal].city;
for (var i = 0; i < cityArr.length; i++) {
option += "<option value=\""+i+"\">"+cityArr[i].name+"</option>"
}
$city.append(option);
});


/*
* 根据城市获取区县乡
*/
$city.change(function() {
// 激活区县乡下拉框
$district.attr("disabled", false);
// 获取城市下的区县乡数组
var proVal = $province.val();
var cityVal = $(this).val();
var districtArr = proviceJson[proVal].city[cityVal].districtAndCounty;
option = "";
for (var i = 0; i < districtArr.length; i++) {
option += "<option value=\""+i+"\">"+districtArr[i]+"</option>"
}
$district.append(option);
});

});

</script>

</body>
</html>

三、data.js(模拟数据)

var proviceJson = [{
name: "北京市",
city: [{
name: "北京市",
districtAndCounty: ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云县", "延庆县", "延庆镇"]
}]
}, {
name: "重庆市",
city: [{
name: "重庆市",
districtAndCounty: ["渝中区", "大渡口区", "江北区", "沙坪坝区", "九龙坡区", "南岸区", "北碚区", "万盛区", "双桥区", "渝北区", "巴南区", "万州区", "涪陵区", "黔江区", "长寿区", "合川市", "永川区市", "江津市", "南川市", "綦江县", "潼南县", "铜梁县", "大足县", "荣昌县", "璧山县", "垫江县", "武隆县", "丰都县", "城口县", "梁平县", "开县", "巫溪县", "巫山县", "奉节县", "云阳县", "忠县", "石柱土家族自治县", "彭水苗族土家族自治县", "酉阳土家族苗族自治县", "秀山土家族苗族自治县"]
}]
}, {
name: "河北省",
city: [{
name: "石家庄市",
districtAndCounty: ["长安区", "桥东区", "桥西区", "新华区", "裕华区", "井陉矿区", "辛集市", "藁城市", "晋州市", "新乐市", "鹿泉市", "井陉县", "微水镇", "正定县", "正定镇", "栾城县", "栾城镇", "行唐县", "龙州镇", "灵寿县", "灵寿镇", "高邑县", "高邑镇", "深泽县", "深泽镇", "赞皇县", "赞皇镇", "无极县", "无极镇", "平山县", "平山镇", "元氏县", "槐阳镇", "赵县", "赵州镇"]
}, {
name: "张家口市",
districtAndCounty: ["桥西区", "桥东区", "宣化区", "下花园区", "宣化县", "张家口市宣化区", "张北县", "张北镇", "康保县", "康保镇", "沽源县", "平定堡镇", "尚义县", "南壕堑镇", "蔚县", "蔚州镇", "阳原县", "西城镇", "怀安县", "柴沟堡镇", "万全县", "孔家庄镇", "怀来县", "沙城镇", "涿鹿县", "涿鹿镇", "赤城县", "赤城镇", "崇礼县", "西湾子镇"]
}, {
name: "承德市",
districtAndCounty: ["双桥区", "双滦区", "鹰手营子矿区", "承德县", "下板城镇", "兴隆县", "兴隆镇", "平泉县", "平泉镇", "滦平县", "滦平镇", "隆化县", "隆化镇", "丰宁满族自治县", "大阁镇", "宽城满族自治县", "宽城镇", "围场满族蒙古族自治县", "围场镇"]
}, {
name: "秦皇岛市",
districtAndCounty: ["海港区", "山海关区", "北戴河区", "昌黎县", "昌黎镇", "抚宁县", "抚宁镇", "卢龙县", "卢龙镇", "青龙满族自治县", "青龙镇"]
}]

}];

jQuery实现省级联动效果——源码_省级联动_02


标签:jQuery,city,name,district,--,源码,联动,var,option
From: https://blog.51cto.com/ohxiaohu/6103737

相关文章

  • JobSchedulingData源码
    //------------------------------------------------------------------------------//<auto-generated>//Thiscodewasgeneratedbyatool.//RuntimeV......
  • 从源码MessageSource的三个实现出发实战spring·i18n国际化
    1.前言互联网业务出海,将已有的业务​​CopytoGlobal​​,并且开始对各个国家精细化,本土化的运营。对于开发人员来说,国际化很重要,在实际项目中所要承担的职责是按照客户指定......
  • 云HIS源码 Java二甲医院HIS系统 融合B/S版电子病历系统,支持电子病历四级
    一、云HIS系统综合概述一款满足二甲医院、基层医疗机构各类业务需要的健康云产品。该产品能帮助基层医疗机构完成日常各类业务,提供病患挂号支持、病患问诊、电子病历、开药......
  • 大白话+画图 从源码角度一步步搞懂ArrayList和LinkedList的使用
    1.说说ArrayList1.基本原理ArrayList,原理就是底层基于数组来实现。01.基本原理:数组的长度是固定的,java里面数组都是定长数组,比如数组大小设置为100,此时你不停的往Arra......
  • 第三方模块源码下载安装步骤讲解
    第一步:在Gitee上clone下来第二步:在本机下载目录找下载好了的源码文件第三步:装完之后,首先把路径复制下来第四步:之后来到项目,在terminal里面先CD到C盘,再把刚刚复制的......
  • CentOS 升级内核的三种方式(yum/rpm/源码)
    CentOS升级内核的三种方式(yum/rpm/源码)在CentOS使用过程中,难免需要升级内核,但有时候因为源码编译依赖问题,不一定所有程序都支持最新内核版本,所以以下将介绍三种升级内......
  • 基层医院云HIS源码
    云HIS系统全新技术框架:总体框架:SaaS应用,全浏览器访问前后端分离,多服务协同服务可拆分,功能易扩展云HIS系统技术细节:前端:Angular+Nginx后台:Java+Spring,SpringBoot,Spring......
  • HashSet 源码解读
    1.创建HashSetSet<String>set=newHashSet<>();set.add("aaa");2.构造方法privatetransientHashMap<E,Object>map;/***Constructsanew,emptyset;......
  • LinkedList 源码解读
    1.创建 LinkedListList<String>list=newLinkedList<>();list.add("wang");2.构造方法:开起了什么都没有做/***Constructsanemptylist.*/......
  • ArrayList源码解读
    1.创建ArrayListList<String>list=newArrayList<>();list.add("wang");2.构造方法:elementData的长度就是ArrayList的容量,在第一次使用时,elementData的长度会扩展......