`
123629996
  • 浏览: 294440 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

jQuery实现省市联动

阅读更多

用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,自己的小店

分享到:
评论
4 楼 123629996 2012-07-20  
mickeylight 写道
下下来后。index.html打开,没有效果呀?

这个没有问题的,请检查浏览器是否允许执行javascript脚本
3 楼 mickeylight 2012-07-12  
下下来后。index.html打开,没有效果呀?
2 楼 123629996 2012-05-02  
aa00aa00 写道
谢谢提供例子

客气,能帮助到你不胜荣幸!
1 楼 aa00aa00 2012-04-25  
谢谢提供例子

相关推荐

    [转帖]jQuery实现省市联动

    标题中的“jQuery实现省市联动”是指在Web应用中,通过jQuery库来实现在选择省份时,下拉框(或其它选择组件)中的城市选项能够自动更新,以展示与所选省份对应的城市列表。这种功能常见于地址输入或者注册表单中,...

    jquery实现省市联动

    在网页开发中,"jQuery 实现省市联动"是一种常见的交互设计,它允许用户在选择省份时,自动更新下方的城市列表,提供更为便捷的地区选择体验。这种功能在注册、地址填写等场景中尤为常见。本教程将深入讲解如何利用 ...

    jquery实现省市联动的例子

    在网页开发中,省市联动是一种常见的交互功能,它允许用户在选择省份后,城市...当然,随着前端技术的发展,现代框架如Vue、React和Angular也有各自的解决方案,但理解基础的jQuery实现对理解更高级的框架很有帮助。

    JQuery实现省市联动-CSDN博客.mhtml

    利用JQuery的基本使用方法,并且其中添加了一些基本的东西,最终实现省市联动。

    ajax使用jquery json实现的省市县三级联动经验总结

    ### Ajax与jQuery在省市县三级联动中的应用 #### 一、Ajax简介 Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,...

    jQuery_省市联动

    3. **JavaScript/jQuery代码**:`city.js` 文件包含了实现省市联动的JavaScript逻辑。这里可能定义了一个函数或者一系列的事件处理器,用于响应用户在省级选择框中的选择,并动态更新市级选择框的内容。这通常涉及到...

    基于jquery实现省市联动效果

    基于jQuery实现省市联动效果的知识点主要包括以下几点: 1. jQuery基础:首先,要实现省市联动效果,需要了解jQuery的使用方法。jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画和...

    Jquery实现省市区联动

    本文将详细讲解如何利用jQuery实现省市区联动的效果,这是一种常见于网页表单中的功能,用于动态更新下拉菜单的内容,提高用户输入的效率和准确性。 省市区联动的基本原理是,当用户在省份选择框中选择一个特定的...

    基于jquery实现省市联动特效

    基于jQuery实现省市联动特效,是一种通过网页前端脚本与服务器交互,动态生成省市二级联动菜单的技术。利用了jQuery库及其插件(例如jquery.area.js)的丰富功能,可以方便快捷地实现这种常见的网页特效。接下来,...

    Jquery实现省市区/县三级联动的Javascript脚本

    Jquery实现省市区/县三级联动的Javascript脚本

    实现省市联动的demo

    在IT行业中,省市联动是一种常见的前端交互功能,它主要用于用户选择省份时,自动更新...这个压缩包中的"Jquery实现省市联动"可能包含了完整的代码示例,下载后可以直接运行查看效果,进一步学习和理解这种实现方式。

    jquery实现省市县三级联动

    在网页开发中,"jQuery 实现省市县三级联动"是一个常见的功能需求,尤其在构建具有地理定位信息的网站或应用时。这个功能允许用户在选择省份后,市和县(或区)的下拉列表会自动更新,显示出与之相关的选项,提供了...

    省市联动jquery+struts2

    标题中的“省市联动jQuery+Struts2”是指在Web开发中使用jQuery库和Struts2框架实现的一个功能,即当用户选择一个省份时,相关的城市会动态地在下拉列表中加载出来,提供用户选择。这个功能在很多需要收集用户地址...

    JQuery实现的省市联动选择

    实现省市联动选择,我们需要利用以下jQuery方法: 1. **$(document).ready()**:这是一个jQuery提供的函数,用于在DOM(文档对象模型)完全加载后执行代码,确保我们可以在页面上操作元素。 2. **$.ajax()**:这是...

    Jquery实现省市区三级联动多选.zip

    "Jquery实现省市区三级联动多选"是一个典型的前端技术应用,它解决了传统二级联动或三级联动一对一模式的问题,引入了多选功能,使得用户在选择省市区时可以有更大的自由度。 一、jQuery简介 jQuery是一个快速、...

    jquery + servlet实现省市联动二级菜单

    本话题聚焦于“jquery + servlet实现省市联动二级菜单”这一技术实践,这是一个常见的前端与后端协同工作的场景,主要用于提升用户体验,使得用户在选择省份时,市一级的下拉菜单能实时更新为相应省份的城市。...

    jquery省市县联动下拉框

    在网页开发中,"jQuery省市县联动下拉框"是一个常见的功能需求,它主要用于实现用户在选择省份时,对应的市和县下拉框能够自动更新,提供与所选省份匹配的选项。这种交互设计可以极大地提升用户体验,尤其在处理大量...

    jQuery省市联动

    下面我们将深入探讨jQuery实现省市联动的关键知识点。 首先,理解省市联动的基本原理:当用户在省份选择框中选择一个省份时,系统通过JavaScript动态地改变城市选择框的选项,以显示与所选省份对应的城市列表。这种...

Global site tag (gtag.js) - Google Analytics