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>

执行结果如下图所示：

也确实很丑！

 

posted @ 2017-05-19 14:59  MISS.Yu  阅读(21732)  评论(1)  编辑  收藏  举报