<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 省级选项 -->
        <select v-model="provId" @change="onChangeProv">
            <option v-for="item in provList" :value="item.value" :disabled="item.value==0">{{item.text}}</option>
        </select>
        <!-- 市级选项 -->
        <select v-model="cityId" @change="onChangeCity">
            <option v-for="item in cityList" v-if="item.provId===0||provId===item.provId" :value="item.value" :disabled="item.value==0">{{item.text}}</option>
        </select>
        <!-- 区级选项 -->
        <select v-model="areaId" @change="onChangeArea">
            <option v-for="item in areaLsit" v-if="item.provId===0||(provId===item.provId && cityId===item.cityId)" :value="item.value"
                :disabled="item.value==0">{{item.text}}</option>
        </select>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                provList: [
                    { text: '请选择省份', value: 0 },
                    { text: '广东省', value: 1 },
                    { text: '广西壮族自治区', value: 2 }
                ],
                cityList: [
                    { text: '请选择城市', value: 0, provId: 0 },
                    { text: '广州市', value: 1, provId: 1 },
                    { text: '深圳市', value: 2, provId: 1 },
                    { text: '南宁市', value: 3, provId: 2 },
                    { text: '桂林市', value: 4, provId: 2 }
                ],
                areaLsit: [
                    { text: '请选择区域', value: 0, cityId: 0, provId: 0 },
                    { text: '天河区', value: 1, cityId: 1, provId: 1 },
                    { text: '白云区', value: 2, cityId: 1, provId: 1 },
                    { text: '宝安区', value: 3, cityId: 2, provId: 1 },
                    { text: '龙岗区', value: 4, cityId: 2, provId: 1 },
                    { text: '西乡塘区', value: 5, cityId: 3, provId: 2 },
                    { text: '青秀区', value: 6, cityId: 3, provId: 2 },
                    { text: '象山区', value: 7, cityId: 4, provId: 2 },
                    { text: '七星区', value: 8, cityId: 4, provId: 2 }
                ],
                /*初始值*/
                provId: 0,
                cityId: 0,
                areaId: 0
            },
            /*点击事件*/
            methods: {
                onChangeProv: function (event) {
                    this.cityId=0;
                    this.areaId=0;
                },
                onChangeCity: function (event) {
                    this.areaId=0;
                },
                onChangeArea: function (event) {
                    console.log(event)
                }
            }
        });
    </script>
</body>


</html>
Logo

前往低代码交流专区

更多推荐