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>
结果为:
原文地址:http://www.cnblogs.com/maxiaopi/p/16852594.html
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。