故如虹,知恩;故如月,知明
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
欢迎加群交流技术

Vue.js 实现省市联动

4301人阅读 2019/1/13 21:21 总访问:3842578 评论:0 收藏:0 手机
分类: 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>

欢迎加群讨论技术,群:677373950(满了,可以加,但通过不了),2群:656732739

评价