用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,自己的小店
相关推荐
标题中的“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动态地改变城市选择框的选项,以显示与所选省份对应的城市列表。这种...