城市数据见 城市数据

样式是基于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 {};
        }
    })();