js 四级联动，利用的vue 的v-model双向绑定 

数据格式为：

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>四级联动</title>
    <script src="../vue3.js"></script>
    <script src="./cityJson.js"></script>
</head>

<body>
    <div id="root">
        <h1>你选择了--{{sheng}}--{{shi}}--{{qu}}--{{street}}</h1>
        <select @change="shengChange" v-model="sheng">
            <option value="">--请选择省--</option>
            <option v-for="(p,key) in shengList" :value="key" :key="key">{{key}}</option>
        </select>
        <select v-model="shi" @change="shiChange">
            <option value="">--请选择市--</option>
            <option v-for="(c,key) in shiList" :value="key" :key="key">{{key}}</option>
        </select>
        <select v-model="qu" @change="quChange">
            <option value="">--请选择区--</option>
            <option v-for="(q,key) in quList" :value="key" :key="key">{{key}}</option>
        </select>
        <select v-model="street">
            <option value="">--请选择街道--</option>
            <option v-for="v in streetList" :value="v" :key="v">{{v}}</option>
        </select>

    </div>
    <script>
        const app = Vue.createApp({
            el: "#root",
            data() {
                return {
                    shengList: cityJson,
                    shiList: {},
                    quList: {},
                    streetList: [],
                    sheng: '',
                    shi: '',
                    qu: '',
                    street: ''

                }
            },
            methods: {
                shengChange() {
                    this.shiList = this.shengList[this.sheng]
                    // 清空
                    this.shi = "";
                    this.street = "";
                    this.qu = "";
                    this.quList = {};
                    this.streetList = []
                },
                shiChange() {
                    this.quList = this.shiList[this.shi];
                    this.streetList = [];
                    this.qu = ''
                    this.street = ''
                },
                quChange() {
                    this.streetList = this.quList[this.qu]
                    this.street = ''
                }
            },
        });
        app.mount('#root')
    </script>
</body>

</html>
结果为：

 

 

 

posted @ 2022-11-02 21:33  丹江路39号  阅读(167)  评论(0)    收藏  举报