Vue.js 下拉連動範例
本文章先列出連動範例，暫不說明。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <form id="vue-wrapper"> <div> <label>市：</label> <select id="city" name="city" v-model="index_id_city"> <option value="">請選擇...</option> <option v-for="(item, index) in commonCode['raw_data']" :value="item.id_city" :key="item.id_city"> {{item.name_city}} </option> </select> </div> <div> <label>區：</label> <select id="area" name="area" v-model="index_id_area"> <option value="">請選擇...</option> <template v-if="index_id_city != '' && commonCode['city_'+ index_id_city] && commonCode['city_'+ index_id_city].detail_area"> <option v-for="(item, index) in commonCode['city_'+ index_id_city].detail_area" :value="item.id_area" :key="item.id_area"> {{item.name_area}} </option> </template> </select> </div> <div> <label>路：</label> <select id="road" name="road" v-model="index_id_road"> <option value="">請選擇...</option> <template v-if="index_id_area != '' && commonCode['area_'+ index_id_area] && commonCode['area_'+ index_id_area].detail_road"> <option v-for="(item, index) in commonCode['area_'+ index_id_area].detail_road" :value="item.id_road" :key="item.id_road"> {{item.name_road}} </option> </template> </select> </div> <div> <label>段：</label> <select id="section" name="section" v-model="index_id_section"> <option value="">請選擇...</option> <template v-if="index_id_road != '' && commonCode['road_'+ index_id_road] && commonCode['road_'+ index_id_road].detail_section"> <option v-for="(item, index) in commonCode['road_'+ index_id_road].detail_section" :value="item.id_section" :key="item.id_section"> {{item.name_section}} </option> </template> </select> </div> </form> <script> var data_address = [ { "name_city": "台北市", "id_city": "001", "detail_area": [ { "name_area": "中山區", "id_area": "0011", "detail_road": [ { "name_road": "民權東路", "id_road": "00111", "detail_section": [ { "name_section": "一段", "id_setion": "0011101" }, { "name_section": "二段", "id_setion": "0011102" } ] }, { "name_road": "南京東路", "id_road": "00112", "detail_section": [ { "name_section": "三段", "id_setion": "0011103" }, { "name_section": "四段", "id_setion": "0011104" } ] } ] }, { "name_area": "大同區", "id_area": "0012", "detail_road": [ { "name_road": "延平北路", "id_road": "00113", "detail_section": [ { "name_section": "五段", "id_setion": "0011105" }, { "name_section": "六段", "id_setion": "0011106" } ] }, { "name_road": "承德路", "id_road": "00114", "detail_section": [ { "name_section": "七段", "id_setion": "0011107" }, { "name_section": "八段", "id_setion": "0011108" } ] } ] } ] }, { "name_city": "高雄市", "id_city": "002", "detail_area": [ { "name_area": "三民區", "id_area": "0013", "detail_road": [ { "name_road": "十全", "id_road": "00115", "detail_section": [ { "name_section": "一路", "id_setion": "0011109" }, { "name_section": "二路", "id_setion": "0011110" } ] }, { "name_road": "大順", "id_road": "00116", "detail_section": [ { "name_section": "三路", "id_setion": "0011111" }, { "name_section": "四路", "id_setion": "0011112" } ] } ] }, { "name_area": "苓雅區", "id_area": "0014", "detail_road": [ { "name_road": "光華", "id_road": "00117", "detail_section": [ { "name_section": "五路", "id_setion": "0011113" }, { "name_section": "六路", "id_setion": "0011114" } ] }, { "name_road": "三多", "id_road": "00118", "detail_section": [ { "name_section": "七路", "id_setion": "0011115" }, { "name_section": "八路", "id_setion": "0011116" } ] } ] } ] } ]; var vm = new Vue({ el: '#vue-wrapper', data: { index_id_city: '',//用來放 dropdown 現在所選的值 index_id_area: '', index_id_road: '', index_id_section: '', commonCode: {},//整理過後的 data_address }, created: function () { var vm = this; vm.ConvertData(data_address); }, methods: { ConvertData: function (material) { var vm = this; let result = new Object(); result["raw_data"] = material;//儲存原始 多筆 city material.map((city) => {//「針對」原始資料的每一筆 city result["city_" + city.id_city] = city;//將一筆 city 儲存至「result」物件之自訂索引 city.detail_area.map((area) => {//「針對」city 底下的每一筆 area result["area_" + area.id_area] = area;//將一筆 area 儲存至「result」物件之自訂索引 area.detail_road.map((road) => {//依此類推 result["road_" + road.id_road] = road; road.detail_section.map((section) => { result["section_" + section.id_section] = section; }); }); }); }); vm.commonCode = result; } } }); </script> </body> </html>
參考資料：