这是小编花了好久才搞出来的全国一级市单独放在一个js文件中,命名为area.js
var provinceList = [
{name:'北京'},
{name:'上海'},
{name:'天津'},
{name:'重庆'},
{name:'广州'},
{name:'韶关'},
{name:'深圳'},
{name:'珠海'},
{name:'汕头'},
{name:'佛山'},
{name:'江门'},
{name:'湛江'},
{name:'茂名'},
{name:'肇庆'},
{name:'惠州'},
{name:'梅州'},
{name:'汕尾'},
{name:'河源'},
{name:'阳江'},
{name:'清远'},
{name:'东莞'},
{name:'中山'},
{name:'潮州'},
{name:'揭阳'},
{name:'云浮'},
{name:'福州'},
{name:'厦门'},
{name:'莆田'},
{name:'三明'},
{name:'泉州'},
{name:'漳州'},
{name:'南平'},
{name:'龙岩'},
{name:'宁德'},
{name:'武汉'},
{name:'荆州'},
{name:'黄石'},
{name:'十堰'},
{name:'宜昌'},
{name:'襄阳'},
{name:'鄂州'},
{name:'荆门'},
{name:'孝感'},
{name:'黄冈'},
{name:'咸宁'},
{name:'随州'},
{name:'仙桃'},
{name:'潜江'},
{name:'天门'},
{name:'神农架林区'},
{name:'恩施土家族苗族自治州'},
{name:'长沙'},
{name:'株洲'},
{name:'湘潭'},
{name:'衡阳'},
{name:'邵阳'},
{name:'岳阳'},
{name:'常德'},
{name:'张家界'},
{name:'益阳'},
{name:'郴州'},
{name:'永州'},
{name:'怀化'},
{name:'娄底'},
{name:'湘西土家族苗族自治州'},
{name:'石家庄'},
{name:'唐山'},
{name:'秦皇岛'},
{name:'邯郸'},
{name:'邢台'},
{name:'保定'},
{name:'张家口'},
{name:'承德'},
{name:'沧州'},
{name:'廊坊'},
{name:'衡水'},
{name:'郑州'},
{name:'开封'},
{name:'洛阳'},
{name:'平顶山'},
{name:'安阳'},
{name:'鹤壁'},
{name:'新乡'},
{name:'焦作'},
{name:'濮阳'},
{name:'许昌'},
{name:'漯河'},
{name:'三门峡'},
{name:'南阳'},
{name:'商丘'},
{name:'信阳'},
{name:'周口'},
{name:'驻马店'},
{name:'太原'},
{name:'大同'},
{name:'阳泉'},
{name:'长治'},
{name:'晋城'},
{name:'朔州'},
{name:'晋中'},
{name:'运城'},
{name:'忻州'},
{name:'临汾'},
{name:'吕梁'},
{name:'西安'},
{name:'铜川'},
{name:'宝鸡'},
{name:'咸阳'},
{name:'渭南'},
{name:'延安'},
{name:'汉中'},
{name:'榆林'},
{name:'安康'},
{name:'商洛'},
{name:'南京'},
{name:'无锡'},
{name:'徐州'},
{name:'常州'},
{name:'苏州'},
{name:'南通'},
{name:'连云港'},
{name:'淮安'},
{name:'盐城'},
{name:'扬州'},
{name:'镇江'},
{name:'泰州'},
{name:'宿迁'},
{name:'杭州',},
{name:'宁波'},
{name:'温州'},
{name:'嘉兴'},
{name:'湖州'},
{name:'绍兴'},
{name:'金华'},
{name:'衢州'},
{name:'舟山'},
{name:'台州'},
{name:'丽水'},
{name:'合肥'},
{name:'芜湖'},
{name:'蚌埠'},
{name:'淮南'},
{name:'马鞍山'},
{name:'淮北'},
{name:'铜陵'},
{name:'安庆'},
{name:'黄山'},
{name:'滁州'},
{name:'阜阳'},
{name:'宿州'},
{name:'巢湖'},
{name:'六安'},
{name:'亳州'},
{name:'池州'},
{name:'宣城'},
{name:'南昌'},
{name:'景德镇'},
{name:'萍乡'},
{name:'九江'},
{name:'新余'},
{name:'鹰潭'},
{name:'赣州'},
{name:'吉安'},
{name:'宜春'},
{name:'抚州'},
{name:'上饶'},
{name:'济南'},
{name:'青岛'},
{name:'淄博'},
{name:'枣庄'},
{name:'东营'},
{name:'烟台'},
{name:'潍坊'},
{name:'济宁'},
{name:'泰安'},
{name:'威海'},
{name:'日照'},
{name:'莱芜'},
{name:'临沂'},
{name:'德州'},
{name:'聊城'},
{name:'滨州'},
{name:'荷泽'},
{name:'沈阳'},
{name:'大连'},
{name:'鞍山'},
{name:'抚顺'},
{name:'本溪'},
{name:'丹东'},
{name:'锦州'},
{name:'营口'},
{name:'阜新'},
{name:'辽阳'},
{name:'盘锦'},
{name:'铁岭'},
{name:'朝阳'},
{name:'葫芦岛'},
{name:'长春'},
{name:'吉林'},
{name:'四平'},
{name:'辽源'},
{name:'通化'},
{name:'白山'},
{name:'松原'},
{name:'白城'},
{name:'延边朝鲜族自治州'},
{name:'哈尔滨'},
{name:'齐齐哈尔'},
{name:'鸡西'},
{name:'鹤岗'},
{name:'双鸭山'},
{name:'大庆'},
{name:'伊春'},
{name:'佳木斯'},
{name:'七台河'},
{name:'牡丹江'},
{name:'黑河'},
{name:'绥化'},
{name:'大兴安岭地区'},
{name:'成都'},
{name:'自贡'},
{name:'攀枝花'},
{name:'泸州'},
{name:'德阳'},
{name:'绵阳'},
{name:'广元'},
{name:'遂宁'},
{name:'内江'},
{name:'乐山'},
{name:'南充'},
{name:'眉山'},
{name:'宜宾'},
{name:'广安'},
{name:'达州'},
{name:'雅安'},
{name:'巴中'},
{name:'资阳'},
{name:'阿坝藏族羌族自治州'},
{name:'甘孜藏族自治州'},
{name:'凉山彝族自治州'},
{name:'贵阳'},
{name:'六盘水'},
{name:'遵义'},
{name:'安顺'},
{name:'铜仁地区'},
{name:'黔西南布依族苗族自治州'},
{name:'毕节地区'},
{name:'黔东南苗族侗族自治州'},
{name:'黔南布依族苗族自治州'},
{name:'昆明'},
{name:'曲靖'},
{name:'玉溪'},
{name:'保山'},
{name:'昭通'},
{name:'丽江'},
{name:'思茅'},
{name:'临沧'},
{name:'楚雄彝族自治州'},
{name:'红河哈尼族彝族自治州'},
{name:'文山壮族苗族自治州'},
{name:'西双版纳傣族自治州'},
{name:'大理白族自治州'},
{name:'德宏傣族景颇族自治州'},
{name:'怒江傈僳族自治州'},
{name:'迪庆藏族自治州'},
{name:'拉萨'},
{name:'昌都地区'},
{name:'山南地区'},
{name:'日喀则地区'},
{name:'那曲地区'},
{name:'阿里地区'},
{name:'林芝地区'},
{name:'兰州'},
{name:'嘉峪关'},
{name:'金昌'},
{name:'白银'},
{name:'天水'},
{name:'武威'},
{name:'张掖'},
{name:'平凉'},
{name:'酒泉'},
{name:'庆阳'},
{name:'定西'},
{name:'陇南'},
{name:'临夏回族自治州'},
{name:'甘南藏族自治州'},
{name:'西宁'},
{name:'海东地区'},
{name:'海北藏族自治州'},
{name:'黄南藏族自治州'},
{name:'海南藏族自治州'},
{name:'果洛藏族自治州'},
{name:'玉树藏族自治州'},
{name:'海西蒙古族藏族自治州'},
{name:'银川'},
{name:'石嘴山'},
{name:'吴忠'},
{name:'固原'},
{name:'中卫'},
{name:'乌鲁木齐'},
{name:'克拉玛依'},
{name:'吐鲁番地区'},
{name:'哈密地区'},
{name:'昌吉回族自治州'},
{name:'博尔塔拉蒙古自治州'},
{name:'巴音郭楞蒙古自治州'},
{name:'阿克苏地区'},
{name:'克孜勒苏柯尔克孜自治州'},
{name:'喀什地区'},
{name:'和田地区'},
{name:'伊犁哈萨克自治州'},
{name:'塔城地区'},
{name:'阿勒泰地区'},
{name:'省直辖行政单位'},
{name:'呼和浩特'},
{name:'包头'},
{name:'乌海'},
{name:'赤峰'},
{name:'通辽'},
{name:'鄂尔多斯'},
{name:'呼伦贝尔'},
{name:'巴彦淖尔'},
{name:'乌兰察布'},
{name:'兴安盟'},
{name:'锡林郭勒盟'},
{name:'阿拉善盟'},
{name:'南宁'},
{name:'柳州'},
{name:'桂林'},
{name:'梧州'},
{name:'北海'},
{name:'防城港'},
{name:'钦州'},
{name:'贵港'},
{name:'玉林'},
{name:'百色'},
{name:'贺州'},
{name:'河池'},
{name:'来宾'},
{name:'崇左'},
{name:'海口'},
{name:'三亚'},
{name:'五指山'},
{name:'琼海'},
{name:'儋州'},
{name:'文昌'},
{name:'万宁'},
{name:'东方'},
{name:'三沙'},
{name:'定安县'},
{name:'屯昌县'},
{name:'澄迈县'},
{name:'临高县'},
{name:'白沙黎族自治县'},
{name:'昌江黎族自治县'},
{name:'乐东黎族自治县'},
{name:'陵水黎族自治县'},
{name:'保亭黎族苗族自治县'},
{name:'琼中黎族苗族自治县'},
{name:'香港岛'},
{name:'九龙'},
{name:'新界'},
{name:'澳门特别行政区'},
{name:'台北区域'},
{name:'台中区域'},
{name:'台南区域'},
{name:'其它区域'}
];
<div class="layui-inline">
<label class="layui-form-label">始发站</label>
<div class="layui-input-inline">
<select name="startprovince" id="startprovince" lay-search>
<option style="display:none"></option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">目的站</label>
<div class="layui-input-inline">
<select name="endprovince" id="endprovince" lay-search>
<option style="display:none"></option>
</select>
</div>
</div>
用于追加城市,在此js前要先引入area.js
function allarea() {
var startprovince = $("#startprovince");
for (var i = 0; i < provinceList.length; i++) {
addstartEle(startprovince, provinceList[i].name);
}
var endprovince = $("#endprovince");
for (var i = 0; i < provinceList.length; i++) {
addendEle(endprovince, provinceList[i].name);
}
function addstartEle(ele, value) {
var optionStr = "";
optionStr = "<option value=" + value + " >" + value + "</option>";
ele.append(optionStr);
}
function addendEle(ele, value) {
var optionStr = "";
optionStr = "<option value=" + value + " >" + value + "</option>";
ele.append(optionStr);
}
}
window.onload = allarea();
当用户选择后,又清空时常常会无法清空,以下js可以解决此问题
$(document).on("input propertychange", "select[lay-search] ~ div input", function () {
if ($(this).val() == "") {
//alert($(this).parent().next().find(".layui-this").html());
$("#startprovince").val(''); //清空原选项值
$(this).parent().next().find(".layui-this").addClass(" layui-hide").removeClass("layui-this"); //清除layui选中状态
$("#endprovince").val(''); //清空原选项值
$(this).parent().next().find(".layui-this").addClass(" layui-hide").removeClass("layui-this"); //清除layui选中状态
}
});
有时搜索出来的城市无法按照上下键而移动时的解决方法需要在form.js中做修改,将注释中的修改为其其下面部分即可
// nearDd = thisElem[prevNext]('dd:not(.'+ HIDE +')'); //当前可视元素的 dd 元素
nearDd = thisElem[prevNext]('dd:not(.layui-hide)'); //当前可视元素的 dd 元素