jquery 城市三级联动
2024-08-24 04:34:09
js代码
/*城市三级联动 * @method cityChange * @param allProvince,allCity,allDistrict */ function cityChange(provinceN,cityN,districtN){
var all_province="";
for(var i=0;i<allCity.province.length;i++){
all_province+='<option name="province" value='+allCity.province[i].id+'><span class="province">'+allCity.province[i].name+'</span></option>'; }; $('#'+provinceN).append(all_province); $('#'+provinceN).change(function () {
var provinceId = $('#'+provinceN).val();
$('#'+cityN).find("option:gt(0)").remove();
$('#'+districtN).find("option:gt(0)").remove();
var all_city="";
if( provinceId!=99999){
for(var j=0;j<allCity.city[provinceId].length;j++){
all_city += '<option name="city" value='+allCity.city[provinceId][j].id+'><span class="city">'+allCity.city[provinceId][j].name+'</span></option>';
} } ;
$('#'+cityN).append(all_city);
}); $('#'+cityN).change(function () {
var cityId = $(this).val();
var all_district="";
for(var k=0;k<allCity.district[cityId].length;k++){
all_district += '<option name="district" value='+allCity.district[cityId][k].id+'><span class="city">'+allCity.district[cityId][k].name+'</span></option>';
} ;
$('#'+districtN).append(all_district);
});
}
HTML代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>城市三级联动</title>
</head>
<body>
<label>三级联动</label>
<div>
<select id="allProvince">
<option value="">请选择省份</option>
</select>
<select id="allCity" >
<option value="">请选择城市</option>
</select>
<select id="allDistrict">
<option value="">请选择区县</option>
</select>
</div> <script src="http://cdn.bootcss.com/jquery/2.0.1/jquery.js"></script>
<script src="allcity.js"></script>
<script src="citychange.js"></script>
<script>
$(function(){cityChange('allProvince','allCity','allDistrict');})
</script>
</body>
</html>
源码下载地址==》下载
最新文章
- 在Linux系统下运行微信Web开发者工具
- MxNet下训练alexnet(一)
- k Sum | &; ||
- C#中的String.Format方法(转)
- C# 定时器事件(设置时间间隔,间歇性执行某一函数,控制台程序)
- echarts通过ajax向服务器发送post请求,servlet从数据库读取数据并返回前端
- 如何从Linux源码获知版本信息
- C# 3.0 基本框架
- --@angularJS--ng-show应用
- MOSFET使用与H桥驱动问题
- mysql用户权限设置,远程访问设置、设置固定ip远程访问,设置root用户不能远程访问mysql数据库
- win10预览版无开始菜单解决方案
- ARP欺骗配置及演示过程
- [官网]Linux版本历史
- hystrix实战
- mysql 基本函数以及初学语句
- 第3章 Vim使用笔记
- FZU - 1989 AntiAC
- 用pycharm提交代码,冲突之后文件丢失找回方法
- Linux less命令语法
热门文章
- 排序算法练习--JAVA(插入、直接选择、冒泡、快速排序、非递归快速排序)
- 2016HUAS_ACM暑假集训4M - 基础DP
- [IOS8兼容性]IOS8上收不到通知
- StackGAN: Text to Photo-realistic Image Synthesis with Stacked Generative Adversarial Networks 论文笔记
- DataTable 批量插入SqlServer数据库 使用:SqlBulkCopy
- 设置XtraForm标题居中
- [2016.08.09]文本替换专家 v5.2
- spring mvc 深入学习
- Google Tensorflow 源码编译(三):tensorflow<;v0.5.0>;
- 也说php从mysql数据库通过服务器端json返回数据出现乱码问题