<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>城市下拉选择组件</title>
<link rel="stylesheet" type="text/css" href="css/city-picker.css">
</head>
<body>
<h2>模拟城市-无联动/无搜索</h2>
<div class="city-picker-selector" id="city-picker-selector">
<div class="selector-item storey province">
<a href="javascript:;" class="selector-name reveal">北京市</a>
<input type="hidden" name="userProvinceId" class="input-price val-error" value="110000" data-required="userProvinceId">
<div class="selector-list listing hide">
<ul>
<li>北京市</li>
<li>天津市</li>
<li>河北省</li>
<li>山西省</li>
</ul>
</div>
</div>
<div class="selector-item storey city">
<a href="javascript:;" class="selector-name reveal">北京市</a>
<input type="hidden" name="userCityId" class="input-price val-error" value="110100" data-required="userCityId">
<div class="selector-list listing hide">
<ul>
<li>北京市</li>
</ul>
</div>
</div>
<div class="selector-item storey district">
<a href="javascript:;" class="selector-name reveal">海淀区</a>
<input type="hidden" name="userDistrictId" class="input-price val-error" value="110108" data-required="userDistrictId">
<div class="selector-list listing hide">
<ul>
<li>东城区</li>
<li>西城区</li>
</ul>
</div>
</div>
</div>
<!-- end .city-picker-selector -->
<h2>模拟城市-联动/搜索/键盘操作</h2>
<div class="city-picker-selector" id="city-picker-search">
<div class="selector-item storey province">
<a href="javascript:;" class="selector-name reveal df-color ">请选择省份</a>
<input type="hidden" name="userProvinceId" class="input-price val-error" value="" data-required="userProvinceId">
<div class="selector-list listing hide">
<div class="selector-search">
<input type="text" class="input-search" value="" placeholder="拼音、中文搜索">
</div>
<ul>
<li>北京市</li>
<li>天津市</li>
</ul>
</div>
</div>
<div class="selector-item storey city">
<a href="javascript:;" class="selector-name reveal df-color forbid">请选择城市</a>
<input type="hidden" name="userCityId" class="input-price val-error" value="" data-required="userCityId">
<div class="selector-list listing hide">
<div class="selector-search">
<input type="text" class="input-search" value="" placeholder="拼音、中文搜索">
</div>
<ul></ul>
</div>
</div>
<div class="selector-item storey district">
<a href="javascript:;" class="selector-name reveal df-color forbid">请选择区县</a>
<input type="hidden" name="userDistrictId" class="input-price val-error" value="" data-required="userDistrictId">
<div class="selector-list listing hide">
<div class="selector-search">
<input type="text" class="input-search" value="" placeholder="拼音、中文搜索">
</div>
<ul></ul>
</div>
</div>
</div>
<!-- end .city-picker-selector -->
<h2>原生城市-无联动</h2>
<div class="city-picker-select"></div>
<!-- end .city-picker-select -->
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/citydata.js"></script>
<script src="js/cityPicker-1.1.4.js"></script>
<script type="text/javascript">
$(function () {
//模拟城市-无联动/无搜索
var selector = $('#city-picker-selector').cityPicker({
dataJson: cityData,
renderMode: true,
search: false,
autoSelected: false,
onForbid: function() {
console.log(this)
}
});
// 省份选择的回调
$('#city-picker-selector').on('choose-province.citypicker', function(event, tagert, values) {
console.log(values);
});
// 城市选择的回调
$('#city-picker-selector').on('choose-city.citypicker', function(event, tagert, values) {
console.log(values);
});
// 城市选择的回调
$('#city-picker-selector').on('choose-district.citypicker', function(event, tagert, values) {
console.log(values);
});
//设置城市
selector.setCityVal([{
'id': '110000',
'name': '北京市'
}, {
'id': '110100',
'name': '北京市'
}, {
'id': '110108',
'name': '海淀区'
}]);
// 获取值
console.log(JSON.stringify(selector.getCityVal()));
//模拟城市-联动/搜索/键盘操作
$('#city-picker-search').cityPicker({
dataJson: cityData,
renderMode: true,
search: true,
autoSelected: true,
keyboard: true
});
// 省份选择的回调
$('#city-picker-search').on('choose-province.citypicker', function(event, tagert, values) {
console.log(values);
});
// 城市选择的回调
$('#city-picker-search').on('choose-city.citypicker', function(event, tagert, values) {
console.log(values);
});
// 城市选择的回调
$('#city-picker-search').on('choose-district.citypicker', function(event, tagert, values) {
console.log(values);
});
//原生城市-无联动
var select = $('.city-picker-select').cityPicker({
dataJson: cityData,
renderMode: false,
autoSelected: true
});
//设置城市
select.setCityVal([{
'id': '140000',
'name': '山西省'
}, {
'id': '140100',
'name': '太原市'
}, {
'id': '140105',
'name': '小店区'
}]);
console.log(select.getCityVal())
});
</script>
</body>
</html>
city picker 城市选择3级联动
需积分: 19 48 浏览量
2017-10-30
13:51:53
上传
评论
收藏 145KB RAR 举报
城市选择.rar （10个子文件） 
城市选择 pc 
index.html 6KB js 
cityPicker-1.1.4.js 17KB citydata.js 758KB jquery-1.11.3.min.js 94KB css city-picker.css 3KB 移动端 index.html 777B city.js 213KB picker.min.js 46KB reset.css 2KB index.js 3KB资源评论
