本地 Js 版省、市级联选择框

#front-end #web

最近在做一个提现的页面,要选择开户行所在地,要选省市。
以前的项目有做过一个级联的,不过好像是选部门然后选人的那种。用 ajax 实现的,用了一个级联的插件。
当时还做了蛮久的,刚毕业不久那会儿,周末加班,现在都还记得调通后的喜悦心情,那时候很多东西都还不懂。
不过我记得当时还是改了些东西的,因为无法完全满足需求。

现在的项目里其实是有一个 ajax 版的选择省市联动的,不过看代码实在是有点乱,不愿用。还不如自己弄一个呢!
有句话其实很有道理:程序员是群很牛逼的人,现成的工具用的不爽了,就要自己去实现一个。

之前做过 ajax 版了,这次就写个本地版的吧,方便调试,也没有网络开销。

因为省份是基本不会变的,然后也就那么些,就直接写在html页面上了。
城市是会根据选择的省份然后 Js 加载的。

html 代码

<select name="bankProvince" id="province_list" style="width:215px">
                       <option  value="上海市" >上海市</option>
                       <option value="安徽省">安徽省</option>
                       <option value="北京市">北京市</option>
                       <option value="重庆市">重庆市</option>
                       <option value="福建省">福建省</option>
                       <option value="广东省">广东省</option>
                       <option value="甘肃省">甘肃省</option>
                       <option value="广西">广西</option>
                       <option value="贵州省">贵州省</option>
                       <option value="河南省">河南省</option>
                       <option value="湖北省">湖北省</option>
                       <option value="河北省">河北省</option>
                       <option value="海南省">海南省</option>
                       <option value="黑龙江省">黑龙江省</option>
                       <option value="湖南省">湖南省</option>
                       <option value="吉林省">吉林省</option>
                       <option value="江苏省">江苏省</option>
                       <option value="江西省">江西省</option>
                       <option value="辽宁省">辽宁省</option>
                       <option value="内蒙古">内蒙古</option>
                       <option value="宁夏">宁夏</option>
                       <option value="青海省">青海省</option>
                       <option value="四川省">四川省</option>
                       <option value="山东省">山东省</option>
                       <option value="陕西省">陕西省</option>
                       <option value="山西省">山西省</option>
                       <option value="天津市">天津市</option>
                       <option value="新疆">新疆</option>
                       <option value="西藏">西藏</option>
                       <option value="云南省">云南省</option>
                       <option value="浙江省">浙江省</option>
                   </select>
                   <select name="bankCity" id="city_list" style="width:216px">
                       <option value="">请选择</option>

                   </select>
//城市数据
var cityJsonData = {
    "安徽省": [
        {
            "cityId": "340800",
            "cityName": "安庆市"
        },
        {
            "cityId": "340300",
            "cityName": "蚌埠市"
        },
        {
            "cityId": "341600",
            "cityName": "亳州市"
        },

        ···

// 切换省份的时候加载对应的城市
function changeProvince(proId)
{	var cityJsonObj = eval(cityJsonData);
    var citys = cityJsonObj[proId];
    $("#code_city").val(citys[0].cityName);
    $("#city_id").val(citys[0].cityId);
     $("#city_list option").remove();
    for(var i=0;i<citys.length;i++)
    {
        var city = citys[i];
        var id = city.cityId;
        $("#city_list").append("<option value="+city.cityName+" id="+city.cityId+">"+city.cityName+"</option>");
    }
}

// 将方法绑定到 省份 select 的 change 事件上
$("#province_list").change(function(){
var content=$(this).val();
changeProvince(content);
})

完整的 Js 代码

There are no comments on this post.