<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ省市区联动</title>
</head>
<body>
<select name="" id="province" onchange="pro(this.value)">
<option value="0">请选择省份</option>
</select>
<select name="" id="city" onchange="cit(this.value)">
<option value="0">请选择城市</option>
</select>
<select name="" id="country">
<option value="0">请选择县区</option>
</select>
<script src="jquery-1.10.1.min.js"></script>
<script>
var data={
'湖南':{
"益阳":["益阳1","益阳2","益阳3"],
"岳阳":["岳阳1","岳阳2","岳阳3","岳阳4","岳阳5","岳阳6","岳阳7"],
"郴州":["郴州1","郴州2","郴州3"],
"湘潭":["湘潭1","湘潭2","湘潭3"]
},
'广东':{
"广州":["广州1","chaoyi","onestopweb.iteye.com"],
"珠海":["珠海1","珠海2","珠海3"],
"佛山":["佛山1"]
},
'河南':{
"郑州":["郑州1","郑州2","郑州3"],
"洛阳":["洛阳1","洛阳2","洛阳3"],
}
}
var p="";
for(var key in data){
p+='<option value="'+key+'">'+key+'</option>';
}
$('#province').append(p);
var pname="";
function pro(a) {
var c='<option value="0">请选择城市</option>';
$('#city').html("");
for(var k in data[a]){
c+='<option value="'+k+'">'+k+'</option>';
}
$('#city').append(c);
pname=a;
}
function cit(a) {
var cou='<option value="0">请选择县区</option>';
$('#country').html("");
for(var k in data[pname][a]){
cou+='<option value="'+data[pname][a][k]+'">'+data[pname][a][k]+'</option>';
}
$('#country').append(cou);
}
</script>
</body>
</html>
效果图：
相关推荐
在IT领域，尤其是在前端开发中，"jq省市区三级联动插件"是一个常见的需求，用于实现用户在选择地址时的便捷交互。这个插件基于jQuery（通常简称为jq），一个广泛使用的JavaScript库，用于简化HTML文档遍历、事件处理...
【JQ省市区三级联动选择插件】是一种广泛应用于网页设计中的JavaScript组件，主要用于实现用户在选择省份时，下方自动显示出对应的市、区/县的下拉列表，从而实现便捷的地址选择功能。这种插件通常基于jQuery库，...
**jQuery省市区三级联动插件**是一种常见的前端开发技术，用于在网页上实现省、市、区（县）的联动选择效果。这种效果通常应用于地址输入、订单填写等场景，可以方便用户快速选择地理位置，提高用户体验。在...
在IT领域，尤其是在前端开发中，"省市区三级联动"是一种常见的功能，广泛应用于地址选择、定位服务等场景。此项目以"html5+jQuery"技术栈为基础，旨在实现一个兼容移动端的三级联动效果，结合了amazeUI的样式设计，...
在Web开发中，常常需要实现省市区三级联动效果，以便用户在填写表单时能方便地选择所在地区。这款强大的jQuery插件正为此目的而设计，它提供了简单易用的API，使得开发者能够快速地在项目中集成这一功能。 ### 一、...
【全国省市区三级联动(PHP+jQuery附数据库)】是一个常见的前端与后端交互的实现方式，主要用于用户在网站上选择地址时提供下拉菜单的联动效果。这种联动通常包括省份、城市和区县三个级别，当用户选择一个省份时，会...
在IT领域，尤其是在前端开发中，"jquery省市区三级联动"是一个常见的需求，主要用于实现用户在选择地址时的交互体验。这个功能允许用户先选择省份，接着根据省份选择城市，最后选择区县，形成一个完整的地址。在这个...
在移动应用和网页开发中，实现用户友好...完成上述步骤后，你将得到一个功能完善的jQuery手机端城市地区选择器，实现省市区三级联动的效果。通过不断优化和调整，可以使其更加符合用户的操作习惯，提升应用的整体体验。
本案例是关于使用jQuery实现移动端和Web端的省市区三级联动效果。jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理和Ajax交互等任务，使得JavaScript编程更加便捷。 首先，我们要理解HTML结构。在...
在网页开发中，"省市区三级联动"是一个常见的功能，常用于用户填写地址时自动填充省、市、区的信息。这个功能通常结合PHP后端、MySQL数据库和jQuery前端JavaScript库来实现。以下将详细讲解这一技术实现的关键点。 ...
"Jquery实现省市区三级联动多选"是一个典型的前端技术应用，它解决了传统二级联动或三级联动一对一模式的问题，引入了多选功能，使得用户在选择省市区时可以有更大的自由度。 一、jQuery简介 jQuery是一个快速、...
"jQuery弹出式下拉框省市区三级联动地区选择插件"就是为了满足这一需求而设计的。这个插件利用jQuery库的强大功能，实现了省市区三级联动的效果，即用户在选择省份后，下拉框会自动更新出对应省份的城市列表，进一步...
在IT行业中，构建一个全国省市区三级联动的下拉菜单是一项常见的需求，特别是在网页表单设计和地理信息系统中。这个任务通常涉及到前端开发，利用JavaScript库来实现动态交互的效果。本例中，我们使用了一个名为...
在移动应用开发中，经常会遇到需要实现省市区三级联动的选择功能。这个功能通常是用户填写地址时需要用到的，它提供了一种高效且直观的方式来选择地理位置。本文将深入探讨如何使用jQuery来实现这样一个移动端的三级...
这个“jquery省市区三级联动插件”是为了解决一个常见的前端开发需求——实现省市区选择的联动效果。这种功能常见于用户注册、地址填写等场景，能够提供用户友好的交互体验。 首先，我们要理解什么是“三级联动”。...
至于省市区三级联动，这是一种常见的地区选择方式，通常包括省份、城市和区县三个层级。当用户在任一层级做出选择时，下一级别的选择框会自动填充与当前选择对应的选项。例如，当用户选择了一个省份后，城市列表会只...
《jQuery省市区三级联动插件：城市选择的高效解决方案》 在网页开发中，省市区三级联动是一个常见的功能，尤其在注册、地址填写等场景下不可或缺。jQuery作为一款广泛使用的JavaScript库，为开发者提供了丰富的API...
在这个“jQuery省市区三级联动百度地图分区代码”项目中，开发者利用jQuery来实现一个交互式的地图功能，使得用户可以在选择省份后，自动筛选出相应的市和区，进一步增强用户体验。 首先，我们需要理解“三级联动”...
"jQuery移动端省市区三级联动"是一个解决方案，它利用了流行的JavaScript库jQuery来实现这一功能。这个压缩包提供了一个完整的示例，包括HTML、CSS样式和JavaScript脚本，使得开发者可以直接引入并快速应用到自己的...