省市區三級聯動
阿新 • • 發佈：2018-09-12
class each index -- 鏈接 ESS width -c type
自己平常用Element中的樣式比較多，最近多出用到三級聯動，就想自己寫一個，但是吧賊low，後面想優化成一個組件，請各位博友提出寶貴的意見！
省市區json文件地址鏈接: https://pan.baidu.com/s/1qo0aFS3kK76ZPzx6-hNJ2A 密碼:sja7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>省市區三級聯動demo</title>
<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入組件庫 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script> </head>
<body> <div class="demo" id="app"> <el-form :inline="true"> <el-form-item label="aaaa"> <div class="select1"> <el-select v-model="value1" placeholder="請選擇" @change="change1"> <el-option v-for="item in options1" :key="item.ssqid" :label="item.ssqname" :value="item.ssqname"> </el-option> </el-select> </div> <div class="select2"> <el-select v-model="value2" placeholder="請選擇" @change="change2"> <el-option v-for="item in options2" :key="item.ssqid" :label="item.ssqname" :value="item.ssqname"> </el-option> </el-select> </div> <div class="select3"> <el-select v-model="value3" placeholder="請選擇"> <el-option v-for="item in options3" :key="item.ssqid" :label="item.ssqname" :value="item.ssqname"> </el-option> </el-select> </div> </el-form-item>
</el-form> </div> </body>
</html> <script src="jq.js"></script> <script> var vm = new Vue({ el: ‘#app‘, data() { return { data: ‘‘, label1: ‘‘, label2: ‘‘, label3: ‘‘, options1: [], options2: [], options3: [], value1: ‘‘, value2: ‘‘, value3: ‘‘ } }, created() { var _this = this $.ajax({ url: ‘./map.json‘, success: function (data) { _this.data = data.provinces _this.options1 = _this.data.province } })
}, methods: { change1(val) { this.options2 = []; this.options3 = []; this.options1.forEach((element, i) => { if (element.ssqname === val) { this.options2 = element.cities.city this.options3 = element.cities.city[0].areas.area this.value2 = element.cities.city[0].ssqname this.value3 = element.cities.city[0].areas.area[0].ssqname } }); }, change2(val) { this.options3 = []; this.options2.forEach((element, i) => { if (element.ssqname === val) { this.options3 = element.areas.area this.value3 = element.areas.area[0].ssqname } }); }, } }) </script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script> </head>
<body> <div class="demo" id="app"> <el-form :inline="true"> <el-form-item label="aaaa"> <div class="select1"> <el-select v-model="value1" placeholder="請選擇" @change="change1"> <el-option v-for="item in options1" :key="item.ssqid" :label="item.ssqname" :value="item.ssqname"> </el-option> </el-select> </div> <div class="select2"> <el-select v-model="value2" placeholder="請選擇" @change="change2"> <el-option v-for="item in options2" :key="item.ssqid" :label="item.ssqname" :value="item.ssqname"> </el-option> </el-select> </div> <div class="select3"> <el-select v-model="value3" placeholder="請選擇"> <el-option v-for="item in options3" :key="item.ssqid" :label="item.ssqname" :value="item.ssqname"> </el-option> </el-select> </div> </el-form-item>
</el-form> </div> </body>
</html> <script src="jq.js"></script> <script> var vm = new Vue({ el: ‘#app‘, data() { return { data: ‘‘, label1: ‘‘, label2: ‘‘, label3: ‘‘, options1: [], options2: [], options3: [], value1: ‘‘, value2: ‘‘, value3: ‘‘ } }, created() { var _this = this $.ajax({ url: ‘./map.json‘, success: function (data) { _this.data = data.provinces _this.options1 = _this.data.province } })
}, methods: { change1(val) { this.options2 = []; this.options3 = []; this.options1.forEach((element, i) => { if (element.ssqname === val) { this.options2 = element.cities.city this.options3 = element.cities.city[0].areas.area this.value2 = element.cities.city[0].ssqname this.value3 = element.cities.city[0].areas.area[0].ssqname } }); }, change2(val) { this.options3 = []; this.options2.forEach((element, i) => { if (element.ssqname === val) { this.options3 = element.areas.area this.value3 = element.areas.area[0].ssqname } }); }, } }) </script>
省市區三級聯動