<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="easyui.css" />
<link rel="stylesheet" href="style.css" />
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js" ></script>
<title>js全国城市三级联动 - 站长素材</title>
<style type="text/css">
body{ background:#EEEEEE;margin:0; padding:0; font-family:"微软雅黑", Arial, Helvetica, sans-serif; }
a{ color:#006600; text-decoration:none;}
a:hover{color:#990000;}
</style>
</head>
<body>
<div class="top">
<h1 style="text-align:center">js全国城市三级联动</h1>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!-- 暂无 港澳台 如需要可在city.json文件中添加-->
<select id="province" name="province" onchange="doProvAndCityRelation();">
<option id="choosePro" value="-1">请选择您所在省份</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="citys" name="city" onchange="doCityAndCountyRelation();">
<option id='chooseCity' value='-1'>请选择您所在城市</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="county" name="county">
<option id='chooseCounty' value='-1'>请选择您所在区/县</option>
</select>
</td>
</tr>
</table>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
</body>
<script language="javascript">
var cityJson;
$(function(){
//load city.json
$.getJSON(
"pca-code.json",
function(obj) {
cityJson = obj;
var sb = new StringBuffer();
$.each(obj, function(i, val) {
sb.append("<option value='"+val.code+"'>"+val.name+"</option>");
});
$("#choosePro").after(sb.toString());
}
);
});
// 省值变化时 处理市
function doProvAndCityRelation(){
var city = $("#citys");
var county = $("#county");
if(city.children().length > 1){
city.empty();
}
if(county.children().length > 1){
county.empty();
}
if($("#chooseCity").length == 0){
city.append("<option id='chooseCity' value='-1'>请选择您所在城市</option>");
}
if($("#chooseCounty").length == 0){
county.append("<option id='chooseCounty' value='-1'>请选择您所在区/县</option>");
}
var sb = new StringBuffer();
//cityJson 就是省市区的集合
/*$.each(cityJson, function(i, val) {
var pro_childs = val.childs //得到所有的省份
$.each(pro_childs, function(j, proVal) {// 然后省份循环寻找与省份对应的城市
//console.log(JSON.stringify(cityVal.name))
if(proVal.code.substr(0, 2) == $("#province").val()){
console.log(JSON.stringify(proVal))
var trueCity = proVal.name
$.each(pro_childs, function(h, cityVal) { //然后把城市循环出来
sb.append("<option value='"+cityVal.code+"'>"+cityVal.name+"</option>");
})
}
})
});*/
$.each(cityJson, function(i, val) {
var pro_childs = val.childs //得到所有的省份
$.each(pro_childs, function(j, proVal) {// 然后 省份循环 寻找与省份对应的城市
if(proVal.code.substr(0, 2) == $("#province").val()){ //判断省份的code 是否与省份的val 相同
/*console.log(JSON.stringify(proVal.code))
console.log(JSON.stringify(proVal))//获取的是所有的城市*/
sb.append("<option value='"+proVal.code+"'>"+proVal.name+"</option>");
}
})
})
$("#chooseCity").after(sb.toString());
}
// 市值变化时 处理区/县
function doCityAndCountyRelation(){
var cityVal = $("#citys").val();
var county = $("#county");
if(county.children().length > 1){
county.empty();
}
if($("#chooseCounty").length == 0){
county.append("<option id='chooseCounty' value='-1'>请选择您所在区/县</option>");
}
var sb = new StringBuffer();
$.each(cityJson, function(i, val) {
var pro_childs = val.childs //得到所有的省份
$.each(pro_childs, function(j, proVal) {// 然后 省份循环 寻找与省份对应的城市
if(proVal.code.substr(0, 2) == $("#province").val()){ //判断省份的code 是否与省份的val 相同
var country_childs = proVal.childs
$.each(country_childs, function(k, countryVal) { //循环城市，查找与城市编码相同的区县
if(countryVal.code.substr(0, 4) == $("#citys").val()){
sb.append("<option value='"+countryVal.code+"'>"+countryVal.name+"</option>");
}
})
}
})
})
$("#chooseCounty").after(sb.toString());
}
function StringBuffer(str){
var arr = [];
str = str || "";
var size = 0 ; // 存放数组大小
arr.push(str);
// 追加字符串
this.append = function(str1) {
arr.push(str1);
return this;
};
// 返回字符串
this.toString = function(){
return arr.join("");
};
// 清空
this.clear = function(key){
size = 0 ;
arr = [] ;
}
// 返回数组大小
this.size = function(){
return size ;
}
// 返回数组
this.toArray = function(){
return buffer ;
}
// 倒序返回字符串
this.doReverse = function(){
var str = buffer.join('') ;
str = str.split('');
return str.reverse().join('');
}
};
</script>
easyui三级联动代码
需积分: 5 164 浏览量
2018-07-18
09:36:58
上传
评论
收藏 270KB 7Z 举报
easyui三级联动代码 （101个子文件） 
easyui.css 33KB style.css 20KB
button_span_bg.gif 2KB panel_loading.gif 2KB pagination_loading.gif 2KB tree_loading.gif 2KB messager_error.gif 2KB messager_question.gif 2KB messager_info.gif 2KB messager_warning.gif 1KB button_a_bg.gif 1KB tree_folder_open.gif 956B tree_folder.gif 952B pagination_first.gif 925B pagination_last.gif 923B panel_tools.gif 908B pagination_prev.gif 879B pagination_next.gif 875B menu.gif 834B datagrid_sort_desc.gif 833B datagrid_sort_asc.gif 830B tabs_close.gif 829B tree_arrows.gif 617B tree_checkbox_2.gif 181B tree_checkbox_1.gif 174B tree_checkbox_0.gif 168B tree_file.gif 118B datagrid_header_bg.gif 97B datagrid_row_expand.gif 91B combo_arrow.gif 82B validatebox_pointer.gif 82B datagrid_row_collapse.gif 80B calendar_prevyear.gif 76B calendar_nextyear.gif 75B calendar_prevmonth.gif 66B calendar_nextmonth.gif 64B spinner_arrow_up.gif 53B spinner_arrow_down.gif 53B blank.gif 43B blank.gif 43B
index3.html 8KB index4.html 5KB jquery.easyui.min.js 288KB jquery-1.9.1.js 256KB jquery-1.8.0.min.js 90KB pca-code.json 127KB
menu_rightarrow.png 4KB date.png 3KB accordion_expand.png 3KB tabs_rightarrow.png 3KB accordion_collapse.png 3KB tabs_leftarrow.png 3KB tabs_active.png 3KB tabs_enabled.png 3KB panel_title.png 3KB datagrid_title_bg.png 3KB large_clipart.png 2KB large_chart.png 2KB large_picture.png 2KB idcard.png 1KB large_smartart.png 1KB large_shapes.png 1KB help.png 1KB cancel.png 1KB edit_add.png 1KB print.png 1KB reload.png 1KB cut.png 1024B no.png 922B validatebox_warning.png 921B back.png 912B filesave.png 898B ok.png 883B slider_handle.png 863B pagination_load.png 827B search.png 813B searchbox_button.png 813B clear.png 779B tip.png 743B tree_elbow.png 723B pencil.png 713B redo.png 708B undo.png 707B datebox_arrow.png 626B edit_remove.png 625B tree_dnd_no.png 605B layout_arrows.png 604B tree_dnd_yes.png 492B lock.png 311B filter.png 305B sum.png 289B man.png 244B mini_add.png 244B menu_split_downarrow.png 185B menu_downarrow.png 173B mini_edit.png 161B mini_refresh.png 160B button_plain_hover.png 144B more.png 110B menu_sep.png 92B共 101 条
- 1
- 2
资源评论
qq_26495107
- 粉丝: 2
- 资源: 3
最新资源
- 5G网络基础培训课件.zip
- 2024-spring-HIT-CS-大作业
- yolo目标检测项目实验
- downloadFile-1.hc
- C++课程设计：基于Qt的航班信息管理系统
- ADS7822UVerilog驱动，前面传的有点问题
- 基于python的高性能爬虫程序，使用了多线程+缓存+xpath实现的，这里以彼-岸图库为例，实现，仅用于学习交流
- 中分辨率成像光谱仪（MODIS）烧毁面积产品信息MODIS-C6-BA-User-Guide-1.2.pdf
- Screenshot_20240427_172613_com.huawei.browser.jpg
- 关于学习Python的相关资源网站链接及相关介绍.docx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
