基本信息
源码名称：jQuery四级联动下拉菜单代码
源码大小：0.04M
文件格式：.zip
开发语言：js
更新时间：2020-01-18
友情提示：（无需注册或充值，赞助后即可获取资源下载链接）
嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300
本次赞助数额为： 2 元×
微信扫码支付：2 元
×
请留下您的邮箱，我们将在2小时内将文件发到您的邮箱
源码介绍
jQuery四级联动下拉菜单代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery四级联动下拉菜单代码</title>
<link rel="stylesheet" type="text/css" href="style/cssreset-min.css">
<link rel="stylesheet" type="text/css" href="style/common.css">
<style type="text/css">
.citys{
margin-bottom: 10px;
}
.citys p{
line-height: 28px;
}
.warning{
color: #c00;
}
.main a{
margin-right: 8px;
color: #369;
}
</style>
<script type="text/javascript" src="script/jquery.min.js"></script>
<script type="text/javascript" src="script/jquery.citys.js"></script>
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="main">
<div id="demo" class="citys">
<p>
<select name="province"></select>
<select name="city"></select>
<select name="area"></select>
</p>
</div>
<div class="code">
<p>通过地区编码初始化设置</p>
<p>$('#demo').citys({code:350206});</p>
</div>
<script type="text/javascript">
$('#demo').citys({code:350206});
</script>
<div id="demo1" class="citys">
<p>
<select name="province"></select>
<select name="city"></select>
<select name="area"></select>
</p>
</div>
<div class="code">
<p>通过地区名称初始化设置，并且下拉框值为地区名称</p>
<p>$('#demo1').citys({valueType:'name',province:'福建',city:'厦门',area:'思明'});</p>
</div>
<script type="text/javascript">
$('#demo1').citys({valueType:'name',province:'福建',city:'厦门',area:'思明'});
</script>
<div id="demo2" class="citys">
<p>
<select name="province"></select>
<select name="city"></select>
<select name="area"></select>
</p>
<p id="place">请选择地区</p>
</div>
<div class="code">
<p>事件处理</p>
<pre>
$('#demo2').citys({
required:false,
nodata:'disabled',
onChange:function(data){
var text = data['direct']?'(直辖市)':'';
$('#place').text('当前选中地区：' data['province'] text ' ' data['city'] ' ' data['area']);
}
});
</pre>
</div>
<script type="text/javascript">
$('#demo2').citys({
required:false,
nodata:'disabled',
onChange:function(data){
var text = data['direct']?'(直辖市)':'';
$('#place').text('当前选中地区：' data['province'] text ' ' data['city'] ' ' data['area']);
}
});
</script>
<div id="demo3" class="citys">
<p>
<select name="province"></select>
<select name="city"></select>
<select name="area"></select>
<select name="town"></select>
</p>
</div>
<div class="code">
<p>扩展显示行政区划第四级(街道)信息：</p>
<pre>
var $town = $('#demo3 select[name="town"]');
var townFormat = function(info){
$town.hide().empty();
if(info['code']%1e4&&info['code']<7e6){ //是否为“区”且不是港澳台地区
$.ajax({
url:'http://passer-by.com/data_location/town/' info['code'] '.json',
dataType:'json',
success:function(town){
$town.show();
for(i in town){
$town.append('<option value="' i '">' town[i] '</option>');
}
}
});
}
};
$('#demo3').citys({
province:'福建',
city:'厦门',
area:'思明',
onChange:function(info){
townFormat(info);
}
},function(api){
var info = api.getInfo();
townFormat(info);
});
</pre>
</div>
<script type="text/javascript">
var $town = $('#demo3 select[name="town"]');
var townFormat = function(info){
$town.hide().empty();
if(info['code']%1e4&&info['code']<7e5){ //是否为“区”且不是港澳台地区
$.ajax({
url:'http://passer-by.com/data_location/town/' info['code'] '.json',
dataType:'json',
success:function(town){
$town.show();
for(i in town){
$town.append('<option value="' i '">' town[i] '</option>');
}
}
});
}
};
$('#demo3').citys({
province:'福建',
city:'厦门',
area:'思明',
onChange:function(info){
townFormat(info);
}
},function(api){
var info = api.getInfo();
townFormat(info);
});
</script>
<div class="example">
<div class="call">
<h1>调用方法：</h1>
<p>$(selector).citys(options,callback);</p>
</div>
<h2> options参数</h2>
<table>
<thead>
<tr>
<th width="150">参数</th>
<th width="120">默认值</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>dataUrl</td>
<td>[数据库地址]</td>
<td>
<p>最新数据库（<script src="http://passer-by.com/data_location/version.js"></script>）：<a href="http://passer-by.com/data_location/list.json" target="_blank">JSON格式</a><a href="http://passer-by.com/data_location/list.jsonp" target="_blank">JSONP格式</a></p>
<p>数据库项目：<a href="https://github.com/mumuy/data_location" target="_blank">中国行政区划（省、市、区、街道）</a></p>
</td>
</tr>
<tr>
<td>dataType</td>
<td>'json'</td>
<td>
<p>数据库类型:'json'或'jsonp'</p>
<p class="warning">IE9-由于默认安全设置，需开启“通过域访问数据源”才能跨域访问json，此类情况建议使用jsonp格式</p>
</td>
</tr>
<tr>
<td>provinceField</td>
<td>'province'</td>
<td>省份(省级)字段名</td>
</tr>
<tr>
<td>cityField</td>
<td>'city'</td>
<td>城市(地级)字段名</td>
</tr>
<tr>
<td>areaField</td>
<td>'area'</td>
<td>地区(县区级)字段名</td>
</tr>
<tr>
<td>valueType</td>
<td>'code'</td>
<td>下拉框值的类型,code行政区划代码,name地名</td>
</tr>
<tr>
<td>code</td>
<td>0</td>
<td>地区编码</td>
</tr>
<tr>
<td>province</td>
<td>[无]</td>
<td>省份(省级),可以为地区编码或者名称</td>
</tr>
<tr>
<td>city</td>
<td>[无]</td>
<td>城市(地级),可以为地区编码或者名称</td>
</tr>
<tr>
<td>area</td>
<td>[无]</td>
<td>地区(县区级),可以为地区编码或者名称</td>
</tr>
<tr>
<td>required</td>
<td>true</td>
<td>是否必须选中(是否自动选择地区)</td>
</tr>
<tr>
<td>nodata</td>
<td>'hidden'</td>
<td>当无数据时的表现形式:'hidden'隐藏,'disabled'禁用,为空不做任何处理</td>
</tr>
<tr>
<td>onChange</td>
<td>[无]</td>
<td>地区切换时触发,回调函数传入地区信息:direct是否为直辖市,province省份(省级)名称,city城市(地级)名称,area地区(县区级)名称,code地区编码</td>
</tr>
</tbody>
</table>
<h2>callback(api)参数</h2>
<table>
<thead>
<tr>
<th width="200">方法</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>getInfo(data)</td>
<td>获取当前选中的地区信息:direct是否为直辖市,province省份(省级)名称,city城市(地级)名称,area地区(县区级)名称,code地区编码</td>
</tr>
</tbody>
</table>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人素材</a></p>
</div>
</body>
</html>