layui全国地址选择器
效果图：
HTML代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="layui/css/layui.css" /> <link rel="stylesheet" type="text/css" href="css/select.css" /> </head> <body> <form class="layui-form layui-form-pane" action=""> <div class="layui-inline" style="padding-left: 9.1%;padding-top: 2%"> <form class="layui-form layui-form-pane" action="javascript:;"> <div class="layui-form-item" id="addressDiv"> <label class="layui-form-label">详细地址</label> <div class="layui-input-inline"> <select name="P1" lay-filter="province" id="province"> <option></option> </select> </div> <div class="layui-input-inline"> <select name="C1" lay-filter="city" id="city"> <option></option> </select> </div> <div class="layui-input-inline"> <select name="A1" lay-filter="area" id="area"> <option></option> </select> </div> <div class="layui-input-inline" id="addressDetail"> <input id="address" type="text" name="address" lay-verify="title" autocomplete="off" placeholder="请输入具体地址" class="layui-input" style="width: 120%;"> <dl id="addressTip" class="addressDl"> </dl> </div> </div> </form> </form> <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script> <script src="js/select.js" type="text/javascript" charset="utf-8"></script> </div> </body> </html>
js
//引入新的插件 layui.config({ base: './js/'//拓展模块的根目录 }).extend({ pca: 'pca' }); //使用自定义的插件pca layui.use(['form', 'layedit', 'laydate', 'upload', "jquery", "pca"], function () { var $ = layui.$ , form = layui.form , pca = layui.pca; //带初始值进行初始化 pca.init('select[name=P1]', 'select[name=C1]', 'select[name=A1]', '浙江', '杭州', '滨江区'); //不带初始值 // pca.init('select[name=P1]', 'select[name=C1]', 'select[name=A1]'); //输入提示 $("#address").bind('input propertychange', function () { var address = document.getElementById("address").value; if (address == "") { document.getElementById("addressTip").style.display = "none"; return; } var html = ''; var province = document.getElementById("province").value; if (province == "全部") { province = ''; } var city = document.getElementById("city").value; if (city == "全部") { city = ''; } var area = document.getElementById("area").value; if (area == "全部") { area = ''; } //查询关键字 var keywords = province + city + area + address; //此处使用的是自定义高德地图服务，可以根据情况进行修改 $.ajax({ type: "POST", url: "http://127.0.0.1:5050/map/inputTip.json", cache: false, async: false, data: { "keywords": keywords }, dataType: "json", contentType: 'application/x-www-form-urlencoded', headers: { 'Authorization': 'bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhY2NvdW50IjoiMTg4MTQ4NjgzOTUiLCJ1c2VySWQiOjYyMH0.llXwj27uSclj1ZcZ9nnzZVqBF7yI_LcS8PDCdUXzTBU' }, success: function (json) { var data = json.data.tips;//json数组 for (var i = 0; i < data.length; i++) { html += '<dd lay-value="" class="addressDd" onclick="ddclick(this)">' + data[i].name + '<span style="color:#9c9a9a;font-size:5px;"> ' + data[i].address + '</span>' + '</dd>'; } } }); document.getElementById("addressTip").innerHTML = html; var s = document.getElementById("addressTip").innerHTML; if (html == "") { document.getElementById("addressTip").style.display = "none"; } else { document.getElementById("addressTip").style.display = "block"; } var lis = document.getElementById("addressDetail").getElementsByTagName("dd"); for (var i = 0; i < lis.length; i++) { if (lis[i].tagName == "DD") { lis[i].onclick = (function () {//增加单击事件 return function () { document.getElementById("address").value = this.innerText.trim().split(/\s+/)[0]; document.getElementById("addressTip").style.display = "none"; } } ) (i); } } } ); });
pca.js
layui.define(['table', 'form', 'layer', 'jquery', 'element'], function (exports) { var $ = layui.$; var form = layui.form; var pca = {}; pca.keys = {}; pca.ckeys = {}; pca.init = function (province, city, area, initprovince, initcity, initarea, form) {//jQuery选择器, 省-市-区 var form = layui.form; if (!province || !$(province).length) return; $(province).html(''); $(province).append('<option selected>全部</option>'); for (var i in citys) { $(province).append('<option>' + citys[i].name + '</option>'); pca.keys[citys[i].name] = citys[i]; } form.render('select'); if (initprovince) $(province).next().find('[lay-value="' + initprovince + '"]').click(); if (!city || !$(city).length) return; pca.formRender(city); form.on('select(province)', function (data) { var cs = pca.keys[data.value]; $(city).html(''); $(city).append('<option>全部</option>'); if (cs) { cs = cs.city; for (var i in cs) { $(city).append('<option>' + cs[i].name + '</option>'); pca.ckeys[cs[i].name] = cs[i]; } $(city).find('option:eq(1)').attr('selected', true); } form.render('select'); $(city).next().find('.layui-this').removeClass('layui-this').click(); pca.formHidden('province', data.value); $('.pca-label-province').html(data.value);//此处可以自己修改 显示的位置, 不想显示可以直接去掉 }); if (initprovince) $(province).next().find('[lay-value="' + initprovince + '"]').click(); if (initcity) $(city).next().find('[lay-value="' + initcity + '"]').click(); if (!area || !$(area).length) return; pca.formRender(area); form.on('select(city)', function (data) { var cs = pca.ckeys[data.value]; $(area).html(''); $(area).append('<option>全部</option>'); if (cs) { cs = cs.area; for (var i in cs) { $(area).append('<option>' + cs[i] + '</option>'); } $(area).find('option:eq(1)').attr('selected', true); } form.render('select'); $(area).next().find('.layui-this').removeClass('layui-this').click(); pca.formHidden('city', data.value); $('.pca-label-city').html(data.value); //此处可以自己修改 显示的位置, 不想显示可以直接去掉 }); form.on('select(area)', function (data) { pca.formHidden('area', data.value); $('.pca-label-area').html(data.value); //此处可以自己修改 显示的位置, 不想显示可以直接去掉 }); if (initprovince) $(province).next().find('[lay-value="' + initprovince + '"]').click(); if (initcity) $(city).next().find('[lay-value="' + initcity + '"]').click(); if (initarea) $(area).next().find('[lay-value="' + initarea + '"]').click(); } pca.formRender = function (obj) { $(obj).html(''); $(obj).append('<option>全部</option>'); form.render('select'); } pca.formHidden = function (obj, val) { if (!$('#pca-hide-' + obj).length) $('body').append('<input id="pca-hide-' + obj + '" type="hidden" value="' + val + '" />'); else $('#pca-hide-' + obj).val(val); } var citys = [ { "name": "北京", "city": [{ "name": "北京", "area": ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "平谷区", "怀柔区", "密云县", "延庆县"] }] }, { "name": "天津", "city": [{ "name": "天津", "area": ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "塘沽区", "汉沽区", "大港区", "东丽区", "西青区", "津南区", "北辰区", "武清区", "宝坻区", "宁河县", "静海县", "蓟县"] }] }, //中间部分忽略，demo中已给出 ...... {"name": "钓鱼岛", "city": [{"name": "钓鱼岛", "area": ["钓鱼岛"]}]} ]; exports('pca', pca); });
浙公网安备 33010602011771号