世界级全国省份城市县区4级联动

    科技2022-07-10  90

    世界级/全国/省份/城市/县区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(); }) })
    Processed: 0.196, SQL: 8