城市数据见 城市数据
样式是基于bootstrap 直接上代码
html部分
<div class="col-sm-5">
<label class="search-label">地区:</label>
<select id="cities" class="search-input" v-model="chose_province">
<option value="0">请选择</option>
<option v-for="p in province" :value="p.id">{{p.area_name}}</option>
</select>
<select id="area_id" class="search-input" name="area_id" v-model="chose_city">
<option value="0" selected="selected">请选择</option>
<option v-for="c in cities" :value="c.id" v-if="c.parent_id == chose_province">
{{c.area_name}}
</option>
</select>
</div>
var app = new Vue({
el:"#vue_container",
data:{
current_page:$_GET.page?parseInt($_GET.page):1, /* $_GET为获取url数据,见最下方 */
province:province, //parent_id 等于0 的城市数据对象
chose_province:0,
cities:cities, //parent_id 不等于0 的城市数据对象,多级联动的也是如此
chose_city:0,
},
mounted:function() {
if(typeof $_GET.area_id == 'undefined') {
return ;
}
for(var p in this.cities) {
if(cities[p].id == $_GET.area_id) {
this.chose_province = cities[p].parent_id;
break;
}
}
this.chose_city = $_GET.area_id;
}
})
var $_GET = (function(){
var url = window.document.location.href.toString();
var u = url.split("?");
if(typeof(u[1]) == "string"){
u = u[1].split("&");
var get = {};
for(var i in u){
var j = u[i].split("=");
get[j[0]] = j[1];
}
return get;
} else {
return {};
}
})();