最近在做一个提现的页面，要选择开户行所在地，要选省市。
以前的项目有做过一个级联的，不过好像是选部门然后选人的那种。用 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);
})
There are no comments on this post.