jQuery实现省市联动

最新推荐文章于 2023-11-16 15:26:59 发布
最新推荐文章于 2023-11-16 15:26:59 发布
阅读量90 收藏
点赞数
分类专栏： web前端 文章标签： jQuery json JavaScript C C++ ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lq123629996/article/details/83700161
版权

用jQuery写了一个省市联动的代码，废话不多说，看代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<title>省市联动</title>
</head>
<body>
<select id="province">
	<option>请选择省份</option>
</select>
<select id="city">
	<option>请选择城市</option>
</select>
<script type="text/javascript">
	jQuery(document).ready(function(){
		//加载省信息
		jQuery.post(
		"json/json-array-of-province.json",
		function(data_p){
			for(var i=0;i<data_p.province.length;i++){
				jQuery("#province").append('<option value='+data_p.province[i].code+'>'+data_p.province[i].name+'</option>');
			}
		},
		"json"
		);
		//当省改变的时候加载城市信息
		jQuery("#province").change(function(){
			jQuery("#city").html("");
			jQuery.post(
			"json/json-array-of-city.json",
			function(data_c){
				for(var j=0;j<data_c.city.length;j++){
					var provinceNum = jQuery("#province").val();
					if (provinceNum.substring(0, 2) == data_c.city[j].code.substring(0, 2)){
						jQuery("#city").append('<option value='+data_c.city[j].code+'>'+data_c.city[j].name+'</option>');
					}
					
				}
			},
			"json"
			);
		});
	}
	);
</script>
</body>
</html>

 项目中用到的jQuery库和省市信息的json数据随附件一并送上！手机充值：http://yjck67.taobao.com，自己的小店

lq123629996
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于jquery实现省市联动效果
10-23
主要介绍了基于jquery实现省市联动效果，感兴趣的小伙伴们可以参考一下
jquery实现简单的省市联动
weixin_46683845的博客
04-12 995
样式 <select id="lv1"> <option>请选择</option> </select> <select id="lv2"> <option>请选择</option> </select> 一、使用Ajax发送请求为省级赋值 // 第一次Ajax是为了获取省信息 $.ajax({
jQuery实现省、市二级联动
07-25 5591
客户端省市二级联动.jsp<html><head>$(function(){/* 指定一个函数，在文档加载完成后被调用。*//* 异步请求 查询省信息 */$.ajax({/* eval() 函数是 JavaScript 中的一个全局函数，它将传入的字符串data作为 JavaScript 代码进行解析和执行。
Jquery实现城市选择（省市联动）省市数据
weixin_44968219的博客
05-17 1446
var area = [ { data: [ { data: [ { name: '北京', }, { name: '海淀区', }, { name: '朝阳区', }, { name: '东城区', }, { name: '西城区', }, { name: '崇文区', }, {
jquery实现联动效果 （通用）省市的三级联动 四级联动 同样的做法
最新发布
@Yan*_*zeng博客
11-16 308
三级联动效果
jQuery-实现省市联动
weixin_62971115的博客
08-18 243
【代码】jQuery-实现省市联动。
基于jquery实现省市联动特效
10-23
主要介绍了基于jquery实现省市联动特效，感兴趣的小伙伴们可以参考一下
[转帖]jQuery实现省市联动
03-22
NULL 博文链接：https://abe.iteye.com/blog/998758
JQuery实现省市联动
weixin_43156133的博客
10-08 445
JQuery实现省市联动 一：JQuery简介： jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它...
全js实现省市县联动
04-22
Province City Area Selector 省、市、地区联动选择JS封装类
jQuery实现的省市县三级联动菜单效果完整实例
10-21
主要介绍了jQuery实现的省市县三级联动菜单效果,结合完整实例形式分析了jQuery数组操作及事件响应的相关技巧,非常具有实用价值,需要的朋友可以参考下
jquery省市联动
11-15
jquery实现省市三级联动jquery实现省市三级联动jquery实现省市三级联动
jQuery实现省市区三级联动
weixin_45817492的博客
03-22 2982
jQuery实现省市区三级联动 1.导入jQuery文件 <script type="text/javascript" src="jquery.min.js"></script> 2.定义声明省市区并赋值 var sheng=['广西省','广东省','福建省']; var shi=[['桂林市','南宁市','河池市'],['广州市','深圳市','佛山市'],['三明市','福州市','厦门市']] var xian=[ [['阳朔县','永福县','兴坪县'],['隆安县',
【jQuery 实现省市县三级联动】
Rita_zf的博客
05-31 691
1、导入jQuery文件 <script src="./jquery-3.6.0.min.js"></script> 2、编辑选择css样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name
JQuery+JSON的省市区三级联动效果
一个有故事的胖子
12-18 1172
html中只要简单的添加以下代码 <p>三级联动</p> <div id="city_4"> <select class="prov"></select> <select class="city" disabled="disabled"></select> <select class="dist"...
Jquery实现省市区三级联动
weixin_47382783的博客
08-09 831
一、效果图 二、代码实现 本代码中用到了jquery和Bootstrap，还有两个js文件。distpicker是一款可以实现中国省市区地址三级联动jQuery插件，可完成中国省市区地址联动效果。 distpicker.data.js如下： /*! * Distpicker v1.0.4 * https://github.com/fengyuanchen/distpicker * * Copyright (c) 2014-2016 Fengyuan Chen * Released .
JS省市地区联动（PCAS）
Jin's blog
08-13 1996
PCAS省市地区联动，可自定义显示的省市。 下载地址：http://download.csdn.net/source/3516743
jquery实现省市区联动
09-04
在jQuery中实现省市区联动可以通过以下步骤来实现： 1. 创建省市区的数据源：你可以在JavaScript中创建一个包含省市区数据的对象或者从后台获取数据。例如： ```javascript var data = { provinces: [ { name: '省份1', cities: ['城市1', '城市2'] }, { name: '省份2', cities: ['城市3', '城市4'] } ], cities: [ { name: '城市1', districts: ['区域1', '区域2'] }, { name: '城市2', districts: ['区域3', '区域4'] } ], districts: [ { name: '区域1' }, { name: '区域2' }, { name: '区域3' }, { name: '区域4' } ] }; ``` 2. 创建HTML结构：你可以在HTML中创建三个下拉框，分别用于显示省、市、区的选择。例如： ```html <select id="province"> <option value="">请选择省份</option> </select> <select id="city"> <option value="">请选择城市</option> </select> <select id="district"> <option value="">请选择区域</option> </select> ``` 3. 编写jQuery代码：根据选择的省份和城市，动态更新市区的下拉框选项。例如： ```javascript // 省份下拉框改变事件 $('#province').change(function() { var province = $(this).val(); var cities = data.provinces.find(function(item) { return item.name === province; }).cities; // 清空城市和区域下拉框 $('#city').empty().append('<option value="">请选择城市</option>'); $('#district').empty().append('<option value="">请选择区域</option>'); // 更新城市下拉框选项 cities.forEach(function(city) { $('#city').append('<option value="' + city + '">' + city + '</option>'); }); }); // 城市下拉框改变事件 $('#city').change(function() { var city = $(this).val(); var districts = data.cities.find(function(item) { return item.name === city; }).districts; // 清空区域下拉框 $('#district').empty().append('<option value="">请选择区域</option>'); // 更新区域下拉框选项 districts.forEach(function(district) { $('#district').append('<option value="' + district + '">' + district + '</option>'); }); }); ``` 这样，当选择省份时，城市下拉框会根据选择的省份进行更新；当选择城市时，区域下拉框会根据选择的城市进行更新。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值