html城市二级联动vue,vue 2.x实现城市二级联动

城市数据见 城市数据

样式是基于bootstrap 直接上代码

html部分

地区:

请选择

{{p.area_name}}

请选择

{{c.area_name}}

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 {};

}

})();

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值