约定
- 省市区三级城市联动效果,选择框默认全部显示,选择后根据实际情况显示或隐藏。
- 在省得select上加上属性 load-data=“330102” 即表示页面需把330102这个对应的相关select做相应选中。
- json数据结构:城市编码6位(每2位表示一级),城市层级,上一级编码,城市名称,其他根据业务实际需求而定
效果https://github.com/Pamki/blog/blob/master/web-dom/city/city.html
DOM结构:
<form class="form-horizontal col-xs-6">
<div class="form-group" id="addrs">
<label for="" class="col-sm-3 text-right">地址</label>
<div class="col-sm-3">
<select id="province" class="addr form-control" load-data="210104">
<option value="">--选择省/市--</option>
</select>
</div>
<div class="col-sm-3">
<select id="city" class="form-control">
<option value="">--选择城市--</option>
</select>
</div>
<div class="col-sm-3">
<select id="district" class="form-control">
<option value="">--选择区域--</option>
</select>
</div<