Vue.js 实现省市联动

HTML代码 

    <div id="pro_citys">
 
        省:<select id="provice" v-on:change="prochange()">
            <option v-for="pitem in parray" v-bind:value="pitem.Id">{{ pitem.Name }}
            </option>
        </select>
 
        市：
           <select id="city">
               <option v-for="pitem in citys" v-bind:value="pitem.Id">{{ pitem.Name }}
               </option>
           </select>
 
    </div>

JS代码    

(function () {
 
            $.get("ProviceHandler.ashx", function (result) {
 
                //需要把json字符串转换成json数组对象
                var jsonarray = JSON.parse(result);
 
                //vue实例
                var pvue = new Vue({
                    el: "#pro_citys",
                    data: {
                        parray: jsonarray, //省存放的数据
                        citys: []  //城市存放的数据
                    },
                    methods: {
                        prochange: function () {
 
                            //查询数据，然后给该省下面的城市赋值
                            this.$data.citys = getCityByPid($("#provice").val());
                        }
                    }
                });
 
            });
 
        });
 
 
        //通过省id查询城市id
        var getCityByPid = function (_pid) {
 
            var jsonarray;
 
            $.ajax({
                async: false,
                url: "CityHandler.ashx",
                type: "get",
                data: { proviceId: _pid },
                success: function (result) {
                    //需要把json字符串转换成json数组对象
                    jsonarray = JSON.parse(result);
                }
            });
 
            return jsonarray;
        }

 一个vue实例里边，可以赋值多个数据，为省市都提供数据

 如果一个vue实例里边有多个数据，要注意Vue的作用范围，绑定的id对应的元素要包含需要使用数据的范围里才能作用到

当然vue的实例其实最好不要写到ajax回掉方法里边去，以前写的了好像传的东西也有点问题，暂时就先这样了

 VueJS的事件绑定       

这里使用了v-on:change来为下拉列表框绑定了改变事件，对应的方法就是vue实例里边methods下面的方法：prochange

方法 

v-on:change="prochange()"

 methods: {
        prochange: function () {

              //查询数据，然后给该省下面的诚实赋值
              this.$data.citys = getCityByPid($("#provice").val());
        }
}

这样做的好处就是如果使用vue里边的方法可以放方便的使用vue实例里边对应的数据

通过this.$data就可以获取    

更新：

获取值也用vue,不用jquery。用vue获取select选中的的值

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>


<div id="pro_citys">

    省:<select id="provice" v-on:change="getCitys" v-model="selected">
        <option v-for="item in provices" :value="item.Id">{{item.ProviceName}}</option>
    </select>

    市：
    <select id="city">
        <option v-for="item in citys" :value="item.Id">{{item.CityName}}</option>
    </select>

</div>

<script>

    var vm = new Vue({
        el: "#pro_citys",
        data: {
            selected: "1",
            provices: [],
            citys: []
        },
        methods: {
            getCitys: function () {

                getCItys(vm.$data.selected);
            }
        }
    });

    $.get('/vue/GetProvice', function (result) {
        vm.$data.provices = result;
        vm.$data.selected = vm.$data.provices[0].Id;
        getCItys(vm.$data.selected);
    })

    var getCItys = function (pId) {
        $.get('/vue/GetCitysProviceId?proviceId=' + pId, function (result) {
            vm.$data.citys = result;
        })
    }

</script>