tnblog
首页
视频
资源
登录

vue.js 三级联动

2796人阅读 2021/11/27 11:46 总访问:555278 评论:0 收藏:0 手机
分类: 前端

code:

<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>


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

评价
这一生多幸运赶上过你.
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
欢迎加群交流技术