483 lines
17 KiB
HTML
483 lines
17 KiB
HTML
<style type='text/css'>
|
||
.province { float:left; position:relative;width:150px; height:35px; line-height:35px;border:1px solid #fff;}
|
||
.province:hover { border:1px solid #f7e4a5;border-bottom:1px solid #fffec6; background:#fffec6;}
|
||
.province .provinceall { margin-top:10px;}
|
||
.province ul { list-style: outside none none;position:absolute;padding:0;background:#fffec6;border:1px solid #f7e4a5;display:none;
|
||
width:auto; width:300px; z-index:999999;left:-1px;top:32px;}
|
||
.province ul li { float:left;min-width:60px;margin-left:20px; height:30px;line-height:30px; }
|
||
.modal-body {padding: 0px 30px 0px 30px}
|
||
.checkbox-inline, .radio-inline {padding-left: 10px;}
|
||
|
||
.modal-body {height:auto;}
|
||
.row.row-title b {padding: 10px;}
|
||
.row.row-areas .item {height:430px;overflow:auto; width: 33.33%; float: left;}
|
||
.row.row-areas .child {padding-bottom: 10px; position: relative}
|
||
.row.row-areas .child:before {content: ''; position: absolute; border-bottom: 1px dashed #eee; left: 10px; top:-1px; right: 10px}
|
||
.row.row-areas .child.active {background: #eee}
|
||
.row.row-areas .child.active:before {border: 0}
|
||
.row.row-areas .child:first-child:before {top: 0}
|
||
.p-group, .c-group, .a-group {cursor: default}
|
||
input[type=checkbox] {cursor: pointer}
|
||
</style>
|
||
<div id="modal-areas" class="modal fade" tabindex="-1">
|
||
<div class="modal-dialog" style='width: 800px;'>
|
||
<div class="modal-content">
|
||
<div class="modal-header"><button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button><h3>选择区域</h3></div>
|
||
<div class="modal-body">
|
||
<div class="row row-title">
|
||
<b class="col-sm-4">省份</b>
|
||
<b class="col-sm-4">城市</b>
|
||
<b class="col-sm-4">地区</b>
|
||
</div>
|
||
<div class="row row-areas form-horizontal">
|
||
<div class="item">
|
||
|
||
{if empty($areas['stp'])}
|
||
{loop $areas['province'] $value}
|
||
<div class="child p-group">
|
||
<label class="checkbox-inline " style="cursor: default">{php echo $value['@attributes']['name']}</label>
|
||
<label class="checkbox-inline pull-right">
|
||
<input type="checkbox" id="ch_pcode{php echo $value['@attributes']['code']}" class="provinceall" value="{php echo $value['@attributes']['name']}" data-value="{php echo $value['@attributes']['code']}" title="选择" />
|
||
</label>
|
||
</div>
|
||
{/loop}
|
||
{else}
|
||
{php echo $areas['stp'];}
|
||
{/if}
|
||
|
||
</div>
|
||
|
||
<div class="item" id="d_item">
|
||
|
||
</div>
|
||
|
||
<div class="item" id="a_item">
|
||
|
||
</div>
|
||
|
||
</div>
|
||
<div class="row" style="margin-top:10px;display: none;">
|
||
已选择城市:<span id="city_info"></span>
|
||
</div>
|
||
<div class="row" style="margin-top:10px;display: none;">
|
||
已选择地区:<span id="area_info"></span>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<span class="pull-left">Tip: 点击省份、城市展开子级</span>
|
||
<a href="javascript:;" id='btnSubmitArea' class="btn btn-success" data-dismiss="modal" aria-hidden="true">确定</a>
|
||
<a href="javascript:;" class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script language='javascript'>
|
||
var last_province_code = 0;
|
||
var last_city_code = 0;
|
||
var last_area_code = 0;
|
||
var xmlCityDoc;
|
||
var xml_list = new Array();
|
||
var load_list = new Array();
|
||
|
||
$(function(){
|
||
|
||
// $(".child:not(.a-group)").unbind('click').click(function () {
|
||
//
|
||
// });
|
||
$(document).on("click", '.child:not(.a-group)',
|
||
function (e) {
|
||
$(this).addClass('active').siblings().removeClass('active');
|
||
}
|
||
);
|
||
|
||
|
||
$('.province').mouseover(function(){
|
||
$(this).find('ul').show();
|
||
}).mouseout(function(){
|
||
$(this).find('ul').hide();
|
||
});
|
||
|
||
$('.p-group').click(function(){
|
||
var province_code = $(this).find('input').attr('data-value');
|
||
load_data(province_code);
|
||
load_city(2, province_code, 0, 0);
|
||
});
|
||
|
||
$(document).on("click", '.c-group',
|
||
function (e) {
|
||
var city_code = $(this).find('input').attr('data-value');
|
||
load_city(2, 0, city_code, 0);
|
||
}
|
||
);
|
||
// document.('.c-group').click(function(){
|
||
// var city_code = $(this).find('input').attr('data-value');
|
||
// load_city(2, 0, city_code, 0);
|
||
// });
|
||
|
||
// $('.a-group').click(function(){
|
||
// var area_code = $(this).find('input').attr('data-value');
|
||
// load_city(2, 0, 0, area_code);
|
||
// });
|
||
|
||
$('.provinceall').click(function(){
|
||
var province_code = $(this).attr('data-value');
|
||
load_data(province_code);
|
||
var checked = $(this).get(0).checked;
|
||
var flag = 0;
|
||
|
||
if(checked){
|
||
flag = 1;
|
||
}
|
||
load_city(flag, province_code, 0, 0);
|
||
});
|
||
|
||
|
||
// $('.cityall').click(function(){
|
||
// var city_code = $(this).attr('data-value');
|
||
// var checked = $(this).get(0).checked;
|
||
// var flag = 0;
|
||
//
|
||
// if(checked){
|
||
// flag = 1;
|
||
// }
|
||
//
|
||
// load_city(flag, 0, city_code, 0);
|
||
// });
|
||
|
||
|
||
|
||
$(document).on("click", '.cityall',
|
||
function (e) {
|
||
var city_code = $(this).attr('data-value');
|
||
var checked = $(this).get(0).checked;
|
||
var flag = 0;
|
||
|
||
if(checked){
|
||
flag = 1;
|
||
}
|
||
|
||
load_city(flag, 0, city_code, 0);
|
||
}
|
||
);
|
||
|
||
$('.areaall').click(function(){
|
||
var area_code = $(this).attr('data-value');
|
||
var checked = $(this).get(0).checked;
|
||
var flag = 0;
|
||
if(checked){
|
||
flag = 1;
|
||
}
|
||
load_city(flag, 0, 0, area_code);
|
||
});
|
||
});
|
||
|
||
function load_street(province_code, city_code){
|
||
|
||
var result= $.inArray(city_code, xml_list);
|
||
if (result == -1) {
|
||
xml_list.push(city_code);
|
||
} else {
|
||
return;
|
||
}
|
||
|
||
var left = city_code.substring(0,2);
|
||
var xmlUrl = '../addons/{EWEI_SHOP_V2_MODULE_NAME}/static/js/dist/area/list/'+left+'/'+city_code+'.xml';
|
||
xmlCityDoc = loadXmlFile(xmlUrl);
|
||
|
||
var CityList = xmlCityDoc.childNodes[0].getElementsByTagName("county");
|
||
var html = '';
|
||
|
||
if(CityList && CityList.length>0) {
|
||
for (var i = 0; i < CityList.length; i++) {
|
||
var county = CityList[i];
|
||
var county_code = county.getAttribute("code");
|
||
var streetlist = county.getElementsByTagName("street");
|
||
|
||
for (var m = 0; m < streetlist.length; m++) {
|
||
var street = streetlist[m];
|
||
var sname = street.getAttribute("name");
|
||
var scode = street.getAttribute("code");
|
||
|
||
html +='<div class="col-sm-12 slist pcode_s'+province_code+' ccode_s'+city_code+' acode_s'+county_code+'" style="padding:0;display: none;">';
|
||
html +='<input type="checkbox" class="streetall checkbox_pcode'+province_code+' checkbox_ccode'+city_code+' checkbox_acode'+county_code+'" value="'+sname+'" data-value="'+scode+'" style="margin-top:12px;" />';
|
||
html +='<span class="a-group">'+sname+'</span></div>';
|
||
}
|
||
}
|
||
}
|
||
$('#street_list').append(html);
|
||
}
|
||
|
||
|
||
|
||
function load_data(province_code){
|
||
if (province_code > 0) {
|
||
|
||
if($.inArray(province_code, load_list) == -1) {
|
||
$.ajax({
|
||
type: "GET",
|
||
url: "{php echo webUrl('util/area/ajax')}",
|
||
data: {"province_code":province_code},
|
||
async: false,
|
||
dataType: "json",
|
||
success: function (data) {
|
||
var res = data.result;
|
||
$("#d_item").append(res.stc);
|
||
$("#a_item").append(res.sta);
|
||
//
|
||
// $('.c-group').click(function(){
|
||
// var city_code = $(this).find('input').attr('data-value');
|
||
// load_city(2, 0, city_code, 0);
|
||
// });
|
||
//
|
||
// $('.cityall').click(function(){
|
||
// var city_code = $(this).attr('data-value');
|
||
// var checked = $(this).get(0).checked;
|
||
// var flag = 0;
|
||
//
|
||
// if(checked){
|
||
// flag = 1;
|
||
// }
|
||
//
|
||
// load_city(flag, 0, city_code, 0);
|
||
// });
|
||
|
||
select_load(province_code);
|
||
}
|
||
});
|
||
load_list.push(province_code);
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
function load_city(flag, province_code, city_code, area_code){
|
||
if (province_code >0 ) {
|
||
$('.clist').hide();
|
||
$('.alist').hide();
|
||
$('.pcode_c'+province_code).show();
|
||
|
||
var city_code_first = $('.checkbox_pcode'+province_code).first().attr('data-value');
|
||
last_province_code = province_code;
|
||
|
||
if (flag == 0 ) {
|
||
$('.checkbox_pcode'+province_code).removeAttr("checked");
|
||
} else if (flag == 1 ) {
|
||
$('.checkbox_pcode'+province_code).prop("checked",true);
|
||
}
|
||
}
|
||
|
||
if (city_code >0 ) {
|
||
$('.alist').hide();
|
||
$('.ccode_a'+city_code).show();
|
||
last_city_code = city_code;
|
||
|
||
if (flag == 0 ) {
|
||
$('.checkbox_ccode'+city_code).removeAttr("checked");
|
||
} else if (flag == 1 ) {
|
||
var pcode = $('#ch_ccode'+city_code).attr('pcode');
|
||
$('#ch_pcode'+pcode).prop("checked",true);
|
||
$('.checkbox_ccode'+city_code).prop("checked",true);
|
||
}
|
||
}
|
||
|
||
if (area_code >0 ) {
|
||
$('.slist').hide();
|
||
$('.acode_s'+area_code).show();
|
||
|
||
last_area_code = area_code;
|
||
|
||
if (flag == 0 ) {
|
||
$('.checkbox_acode'+area_code).removeAttr("checked");
|
||
} else if (flag == 1 ) {
|
||
var pcode = $('#ch_acode'+area_code).attr('pcode');
|
||
var ccode = $('#ch_acode'+area_code).attr('ccode');
|
||
$('#ch_pcode'+pcode).prop("checked",true);
|
||
$('#ch_ccode'+ccode).prop("checked",true);
|
||
$('.checkbox_acode'+area_code).prop("checked",true);
|
||
}
|
||
|
||
last_area_code = area_code;
|
||
}
|
||
|
||
if (flag == 0 || flag == 1) {
|
||
update_area();
|
||
}
|
||
}
|
||
|
||
function loadXmlFile(xmlFile) {
|
||
var xmlDom = null;
|
||
if (window.ActiveXObject) {
|
||
xmlDom = new ActiveXObject("Microsoft.XMLDOM");
|
||
xmlDom.async = false;
|
||
xmlDom.load(xmlFile) || xmlDom.loadXML(xmlFile);//如果用的是XML字符串//如果用的是xml文件
|
||
} else if (document.implementation && document.implementation.createDocument) {
|
||
var xmlhttp = new window.XMLHttpRequest();
|
||
xmlhttp.open("GET", xmlFile, false);
|
||
xmlhttp.send(null);
|
||
xmlDom = xmlhttp.responseXML;
|
||
} else {
|
||
xmlDom = null;
|
||
}
|
||
return xmlDom;
|
||
}
|
||
|
||
function clearSelects(){
|
||
$('.c-group').hide();
|
||
$('.a-group').hide();
|
||
$('.p-group').removeClass('active');
|
||
|
||
$('.provinceall').attr('checked',false).removeAttr('disabled');
|
||
$('.cityall').attr('checked',false).removeAttr('disabled');
|
||
$('.areaall').attr('checked',false).removeAttr('disabled');
|
||
}
|
||
|
||
function editArea(btn){
|
||
current = $(btn).attr('random');
|
||
clearSelects();
|
||
|
||
var old_areas = $(btn).next().val().split(';');
|
||
if(old_areas) {
|
||
for(var i in old_areas){
|
||
var area_info = old_areas[i].split(' ');
|
||
if(area_info[0]) {
|
||
load_data(area_info[0]);
|
||
$('#ch_pcode'+area_info[0]).prop("checked",true);
|
||
}
|
||
if(area_info[1]) {
|
||
$('#ch_ccode'+area_info[1]).prop("checked",true);
|
||
}
|
||
if(area_info[2]) {
|
||
$('#ch_acode'+area_info[2]).prop("checked",true);
|
||
}
|
||
}
|
||
}
|
||
|
||
$("#modal-areas").modal();
|
||
var citystrs = '';
|
||
|
||
$('#btnSubmitArea').unbind('click').click(function(){
|
||
update_area();
|
||
var city_html = $('#city_info').html();
|
||
var area_html = $('#area_info').html();
|
||
|
||
$('.' + current + ' .cityshtml').html(city_html);
|
||
$('.' + current + ' .citys').val(city_html);
|
||
$('.' + current + ' .citys_code').val(area_html);
|
||
load_list =[];
|
||
})
|
||
|
||
|
||
var currents = getCurrentsCode(current);
|
||
currents = currents.split(';');
|
||
|
||
var parentdisabled = false;
|
||
for (var i in currents){
|
||
var area_info = currents[i].split(' ');
|
||
if(area_info[0]) {
|
||
$('#ch_pcode'+area_info[0]).prop("disabled",true);
|
||
}
|
||
if(area_info[1]) {
|
||
$('#ch_ccode'+area_info[1]).prop("disabled",true);
|
||
}
|
||
if(area_info[2]) {
|
||
$('#ch_acode'+area_info[2]).prop("disabled",true);
|
||
}
|
||
}
|
||
}
|
||
|
||
function update_area(){
|
||
|
||
var city_html = '';
|
||
var area_html = '';
|
||
|
||
var city_name_html = '';
|
||
var area_name_html = '';
|
||
|
||
var city_code_html = '';
|
||
var area_code_html = '';
|
||
|
||
$(".cityall:checked").each(function(){
|
||
var value = $(this).attr('value');
|
||
var code = $(this).attr('data-value');
|
||
var pname = $(this).attr('pname');
|
||
city_html += value+';';
|
||
var checked_num = $(".ccode_a"+code+"").find(".areaall:checked").length;
|
||
var all_num = $(".ccode_a"+code+"").find(".areaall").length;
|
||
if(checked_num!=all_num){
|
||
$(".ccode_a"+code+"").find(".areaall:checked").each(function () {
|
||
var value = $(this).attr('value');
|
||
city_html += value+';';
|
||
});
|
||
}
|
||
});
|
||
|
||
$(".areaall:checked").each(function(){
|
||
var value = $(this).attr('value');
|
||
var code = $(this).attr('data-value');
|
||
var cname = $(this).attr('cname');
|
||
var ccode = $(this).attr('ccode');
|
||
var pcode = $(this).attr('pcode');
|
||
|
||
area_html += value+';';
|
||
area_name_html += cname+' '+value+';';
|
||
area_code_html += pcode+' '+ccode+' '+code+';';
|
||
});
|
||
|
||
$('#city_info').html(city_html);
|
||
$('#area_info').html(area_code_html);
|
||
}
|
||
|
||
function selectAreas(){
|
||
clearSelects();
|
||
var old_areas = $('#selectedareas_code').val().split(';');
|
||
|
||
if(old_areas) {
|
||
for(var i in old_areas){
|
||
|
||
var area_info = old_areas[i].split(' ');
|
||
if(area_info[0]) {
|
||
load_data(area_info[0]);
|
||
$('#ch_pcode'+area_info[0]).prop("checked",true);
|
||
}
|
||
// if(area_info[1]) {
|
||
// $('#ch_ccode'+area_info[1]).prop("checked",true);
|
||
// }
|
||
// if(area_info[2]) {
|
||
// $('#ch_acode'+area_info[2]).prop("checked",true);
|
||
// }
|
||
}
|
||
}
|
||
|
||
$("#modal-areas").modal();
|
||
var citystrs = '';
|
||
$('#btnSubmitArea').unbind('click').click(function(){
|
||
update_area();
|
||
var city_html = $('#city_info').html();
|
||
var area_html = $('#area_info').html();
|
||
$('#areas').html(city_html);
|
||
$("#selectedareas").val(city_html);
|
||
$("#selectedareas_code").val(area_html);
|
||
load_list =[];
|
||
})
|
||
}
|
||
|
||
function select_load(province_code){
|
||
var old_areas = $('#selectedareas_code').val().split(';');
|
||
|
||
if(old_areas) {
|
||
for(var i in old_areas){
|
||
var area_info = old_areas[i].split(' ');
|
||
if (area_info[0] == province_code) {
|
||
if(area_info[1]) {
|
||
$('#ch_ccode'+area_info[1]).prop("checked",true);
|
||
}
|
||
if(area_info[2]) {
|
||
$('#ch_acode'+area_info[2]).prop("checked",true);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
</script>
|