iosselect
Version:
iosselect for andriod and ios
94 lines (91 loc) • 4.02 kB
HTML
<head>
<title>address</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../../src/iosSelect.css">
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?b25bf95dd99f58452db28b1e99a1a46f";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body>
<a href="https://github.com/zhoushengmufc/iosselect">查看文档</a>
<div class="form-item item-line" id="select_contact">
<label>省、市</label>
<div class="pc-box">
<input type="hidden" name="contact_province_code" data-id="0001" id="contact_province_code" value="" data-province-name="">
<input type="hidden" name="contact_city_code" id="contact_city_code" value="" data-city-name=""><span data-city-code="510100" data-province-code="510000" data-district-code="510105" id="show_contact">四川省 成都市 青羊区</span>
</div>
</div>
</body>
<script src="zepto.js"></script>
<script src="../../src/iosSelect.js"></script>
<script type="text/javascript">
var areaData1= function(callback){// callback为回调函数
$.ajax({
url: 'https://test-isemail.rhcloud.com/area.php',
dataType: 'json',
success:function(data,textStatus){
callback(data);
},
});
}
var areaData2= function(province,callback){// province为已经选中的省份ID,callback为回调函数
$.ajax({
url: 'https://test-isemail.rhcloud.com/area.php?province='+province,
dataType: 'json',
success:function(data,textStatus){
callback(data);
},
});
}
var areaData3= function(province,city,callback){// province为已经选中的省份ID,city为已经选中的城市ID,callback为回调函数
$.ajax({
url: 'https://test-isemail.rhcloud.com/area.php?province='+province+'&city='+city,
dataType: 'json',
success:function(data,textStatus){
callback(data);
},
});
}
var selectContactDom = $('#select_contact');
var showContactDom = $('#show_contact');
var contactProvinceCodeDom = $('#contact_province_code');
var contactCityCodeDom = $('#contact_city_code');
selectContactDom.bind('click', function () {
var sccode = showContactDom.attr('data-city-code');
var scname = showContactDom.attr('data-city-name');
var oneLevelId = showContactDom.attr('data-province-code');
var twoLevelId = showContactDom.attr('data-city-code');
var threeLevelId = showContactDom.attr('data-district-code');
var iosSelect = new IosSelect(3,
[areaData1, areaData2, areaData3],
{
title: '地址选择',
itemHeight: 35,
relation: [1, 1, 0, 0],
oneLevelId: oneLevelId,
twoLevelId: twoLevelId,
threeLevelId: threeLevelId,
showLoading:true,
callback: function (selectOneObj, selectTwoObj, selectThreeObj) {
contactProvinceCodeDom.val(selectOneObj.id);
contactProvinceCodeDom.attr('data-province-name', selectOneObj.value);
contactCityCodeDom.val(selectTwoObj.id);
contactCityCodeDom.attr('data-city-name', selectTwoObj.value);
showContactDom.attr('data-province-code', selectOneObj.id);
showContactDom.attr('data-city-code', selectTwoObj.id);
showContactDom.attr('data-district-code', selectThreeObj.id);
showContactDom.html(selectOneObj.value + ' ' + selectTwoObj.value + ' ' + selectThreeObj.value);
}
});
});
</script>
</body>
</html>