世界级/全国/省份/城市/县区4级联动
Js为腾讯qq的LocList.xml 需要转为json格式的js文件 (在QQ安装目录可以找到loclist.xml文件 C:\ProgramFiles\Tencent\QQIntl\I18N\2052) XML转json在线地址:http://www.ab173.com/json/xml2json.php
layui Html:
<div class="layui-form-item">
<label class="layui-form-label" style="width: 100px;">城市
</label>
<div class="layui-input-inline">
<select lay-filter="country" id="country" name="increment_country">
</select>
</div>
<div class="layui-input-inline">
<select lay-filter="province" id="province" name="increment_province">
</select>
</div>
<div class="layui-input-inline">
<select lay-filter="city" id="city" name="increment_city">
</select>
</div>
<div class="layui-input-inline">
<select id="area" name="increment_area">
</select>
</div>
</div>
jq:
$(function () {
$
.getJSON("/weui/js/loclist.js", function (data
){
console
.log(data
.Location
.CountryRegion
)
data
= data
.Location
.CountryRegion
;
var str
= '';
str
+= '<option value="0">选择国家</option>';
for(var i
in data
) {
str
+= '<option value="'+data
[i
]['-Code']+'">'+data
[i
]['-Name']+'</option>';
};
$('#country').html(str
);
form
.render();
})
})
form
.on('select(country)', function(datas
){
var country
= datas
.value
;
$
.getJSON("/weui/js/loclist.js", function (data
){
data
= data
.Location
.CountryRegion
;
var str
= '<option value="0">选择省份</option>';
for(var i
in data
) {
if (data
[i
]['-Code'] == country
)
{
var sub
= data
[i
]['State'];
for(var k
in sub
) {
str
+= '<option value="'+sub
[k
]['-Code']+'">'+sub
[k
]['-Name']+'</option>';
};
}
};
$('#province').html(str
);
form
.render();
})
})
form
.on('select(province)', function(datas
){
var province
= datas
.value
;
$
.getJSON("/weui/js/loclist.js", function (data
){
data
= data
.Location
.CountryRegion
;
var str
= '<option value="0">选择城市</option>';
for(var i
in data
) {
var State
= data
[i
]['State'];
for(var k
in State
) {
if (State
[k
]['-Code'] == province
)
{
var sub
= State
[k
]['City'];
for(var l
in sub
) {
str
+= '<option value="'+sub
[l
]['-Code']+'">'+sub
[l
]['-Name']+'</option>';
};
}
};
};
$('#city').html(str
);
form
.render();
})
})
form
.on('select(city)', function(datas
){
var province
= $('#province').val();
var city
= datas
.value
;
$
.getJSON("/weui/js/loclist.js", function (data
){
data
= data
.Location
.CountryRegion
;
var str
= '<option value="0">选择县/区</option>';
for(var i
in data
) {
var State
= data
[i
]['State'];
for(var k
in State
) {
if (State
[k
]['-Code'] == province
) {
var City
= State
[k
]['City'];
for (var c
in City
) {
if (City
[c
]['-Code'] == city
) {
var sub
= City
[c
]['Region'];
for (var l
in sub
) {
str
+= '<option value="' + sub
[l
]['-Code'] + '">' + sub
[l
]['-Name'] + '</option>';
}
;
}
}
;
};
};
};
$('#area').html(str
);
form
.render();
})
})
转载请注明原文地址:https://blackberry.8miu.com/read-1468.html