Vue.js下拉框-詳細省市聯動示例

本文轉載自查看原文 2017-05-19 14:59 16787 Vue.js/ 聯動下拉/ 下拉框/ 省市聯動

1.引入必要JS文件，以下截圖是js文件截圖。

2.把HTML寫好，我這樣式是比較丑的，不要在意這些細節。

 1 <body>
 2 
 3     <div id="divContent">
 4         <select v-model="OneData">
 5             <template v-for="item in selOneVal">
 6                     <option v-bind:value="item.value">{{item.text}}</option>
 7             </template>
 8         </select>
 9         <select v-model="TwoData">
10             <template v-for="item in selTwoVal">
11                     <option v-bind:value="item.value">{{item.text}}</option>
12             </template>
13         </select>
14         <select v-model="ThreeData">
15             <template v-for="item in selThreeVal">
16                     <option v-bind:value="item.value">{{item.text}}</option>
17             </template>
18         </select>
19     </div>
20   </body>

3.寫Vue部分的代碼，我這省市都是寫死的，如需動態加載數據,可以稍微修改一下。

 1 <script type="text/javascript">
 2         $(function () {
 3             vm.OneChange();
 4         })
 5         var vm = new Vue({
 6             el: '#divContent',
 7             data: {
 8                 selOneVal: [],
 9                 selTwoVal: [],
10                 selThreeVal: [],
11                 OneData: '國家',
12                 TwoData: '省級',
13                 ThreeData: '市區'
14 
15             }, methods: {
16                 OneChange: function () {
17                     vm.selOneVal = [];
18                     // this.selOneVal = [{ value: '-1', text: '國家' }];
19                     this.selOneVal.push(
20                         { value: '國家', text: '國家' },
21                         { value: '1', text: '中國' },
22                         { value: '2', text: '法國' },
23                         { value: '3', text: '德國' }
24                     )
25                     this.selTwoVal.push({ value: '省級', text: '省級' })
26                     this.selThreeVal.push({ value: '市區', text: '市區' })
27                 }
28             }
29                , watch: {
30                    OneData: function () {
31                        vm.selTwoVal = [];
32                        vm.selThreeVal = [];
33 
34                        this.selTwoVal.push({ value: '省級', text: '省級' })
35                        this.selThreeVal.push({ value: '市區', text: '市區' })
36 
37                        var s1 = vm.OneData;
38                        if (s1 == 1) {
39                            this.selTwoVal.push(
40                        { value: '1', text: '湖南' },
41                        { value: '2', text: '湖北' },
42                        { value: '3', text: '上海' })
43 
44                        } else if (s1 == 2) {
45                            this.selTwoVal.push(
46                     { value: '4', text: 'Paris' },
47                     { value: '5', text: 'Nanc' },
48                     { value: '6', text: 'Rouen' })
49                        } else if (s1 == 3) {
50                            this.selTwoVal.push(
51                     { value: '7', text: 'Berlin' },
52                     { value: '8', text: 'Hamburg' },
53                     { value: '9', text: 'Munich' })
54                        }
55                        vm.TwoData = '省級';
56                        vm.ThreeData = '市區';
57                    },
58                    TwoData: function () {
59                        //vm.selThreeVal = [{ value: '-1', text: '市區' }];
60                        var s2 = vm.TwoData;
61                        vm.selThreeVal = [];
62                        this.selThreeVal.push({ value: '市區', text: '市區' })
63                        if (s2 == 1) {
64                            this.selThreeVal.push(
65                        { value: '1', text: '邵陽' },
66                        { value: '2', text: '長沙' },
67                        { value: '3', text: '湘潭' })
68                        } else if (s2 == 2) {
69                            this.selThreeVal.push(
70                     { value: '4', text: '宜昌' },
71                     { value: '5', text: '武漢' },
72                     { value: '6', text: '襄陽' })
73                        } else if (s2 == 3) {
74                            this.selThreeVal.push(
75                     { value: '7', text: '浦東新區' },
76                     { value: '8', text: '徐匯區' },
77                     { value: '9', text: '靜安區' })
78                        }
79                        vm.ThreeData = '市區';
80                    },
81                }
82         })
83     </script>

執行結果如下圖所示：

也確實很丑！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue.js組件之聯動下拉框 JS 實現下拉框省市區三級聯動省市區三級聯動下拉框 js實現下拉框聯動 js下拉框聯動代碼 Vue.js學習（八）—— 樹形結構下拉框組件vue-treeselect VUE三級聯動的下拉框一個很好的JS,ASP二級下拉框聯動。 php mysql js 下拉框二級聯動原生js實現三級聯動下拉框