<!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>
所用jar包和js文件一并附上
分享到：
相关推荐
标题中的“jQuery实现省市联动”是指在Web应用中，通过jQuery库来实现在选择省份时，下拉框（或其它选择组件）中的城市选项能够自动更新，以展示与所选省份对应的城市列表。这种功能常见于地址输入或者注册表单中，...
在网页开发中，"jQuery 实现省市联动"是一种常见的交互设计，它允许用户在选择省份时，自动更新下方的城市列表，提供更为便捷的地区选择体验。这种功能在注册、地址填写等场景中尤为常见。本教程将深入讲解如何利用 ...
在网页开发中，省市联动是一种常见的交互功能，它允许用户在选择省份后，城市...当然，随着前端技术的发展，现代框架如Vue、React和Angular也有各自的解决方案，但理解基础的jQuery实现对理解更高级的框架很有帮助。
利用JQuery的基本使用方法，并且其中添加了一些基本的东西，最终实现省市联动。
### Ajax与jQuery在省市县三级联动中的应用 #### 一、Ajax简介 Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，...
3. **JavaScript/jQuery代码**：`city.js` 文件包含了实现省市联动的JavaScript逻辑。这里可能定义了一个函数或者一系列的事件处理器，用于响应用户在省级选择框中的选择，并动态更新市级选择框的内容。这通常涉及到...
基于jQuery实现省市联动效果的知识点主要包括以下几点： 1. jQuery基础：首先，要实现省市联动效果，需要了解jQuery的使用方法。jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和...
本文将详细讲解如何利用jQuery实现省市区联动的效果，这是一种常见于网页表单中的功能，用于动态更新下拉菜单的内容，提高用户输入的效率和准确性。 省市区联动的基本原理是，当用户在省份选择框中选择一个特定的...
基于jQuery实现省市联动特效，是一种通过网页前端脚本与服务器交互，动态生成省市二级联动菜单的技术。利用了jQuery库及其插件（例如jquery.area.js）的丰富功能，可以方便快捷地实现这种常见的网页特效。接下来，...
Jquery实现省市区/县三级联动的Javascript脚本
在IT行业中，省市联动是一种常见的前端交互功能，它主要用于用户选择省份时，自动更新...这个压缩包中的"Jquery实现省市联动"可能包含了完整的代码示例，下载后可以直接运行查看效果，进一步学习和理解这种实现方式。
在网页开发中，"jQuery 实现省市县三级联动"是一个常见的功能需求，尤其在构建具有地理定位信息的网站或应用时。这个功能允许用户在选择省份后，市和县（或区）的下拉列表会自动更新，显示出与之相关的选项，提供了...
标题中的“省市联动jQuery+Struts2”是指在Web开发中使用jQuery库和Struts2框架实现的一个功能，即当用户选择一个省份时，相关的城市会动态地在下拉列表中加载出来，提供用户选择。这个功能在很多需要收集用户地址...
实现省市联动选择，我们需要利用以下jQuery方法： 1. **$(document).ready()**：这是一个jQuery提供的函数，用于在DOM（文档对象模型）完全加载后执行代码，确保我们可以在页面上操作元素。 2. **$.ajax()**：这是...
"Jquery实现省市区三级联动多选"是一个典型的前端技术应用，它解决了传统二级联动或三级联动一对一模式的问题，引入了多选功能，使得用户在选择省市区时可以有更大的自由度。 一、jQuery简介 jQuery是一个快速、...
本话题聚焦于“jquery + servlet实现省市联动二级菜单”这一技术实践，这是一个常见的前端与后端协同工作的场景，主要用于提升用户体验，使得用户在选择省份时，市一级的下拉菜单能实时更新为相应省份的城市。...
在网页开发中，"jQuery省市县联动下拉框"是一个常见的功能需求，它主要用于实现用户在选择省份时，对应的市和县下拉框能够自动更新，提供与所选省份匹配的选项。这种交互设计可以极大地提升用户体验，尤其在处理大量...
下面我们将深入探讨jQuery实现省市联动的关键知识点。 首先，理解省市联动的基本原理：当用户在省份选择框中选择一个省份时，系统通过JavaScript动态地改变城市选择框的选项，以显示与所选省份对应的城市列表。这种...