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>

执行结果如下图所示：

也确实很丑！

转载于:https://www.cnblogs.com/yuwenye/p/6878435.html

Vue.js下拉框-详细省市联动示例相关推荐

vue+element下拉框实现二级联动
参考文章:https://blog.csdn.net/qq_42341025/article/details/86601093 <el-form-item label-width="8 ...
php js下拉框与文本联动,php mysql js 下拉框二级联动
JS代码 function changeappid(){ var appid=document.getElementById("appid").value; $result = T ...
vue省市区下拉框实现
vue省市区下拉框实现 1.效果如图选中省之后,再选择对应的市,再选择对应的区数据源js文件: 码云:https://gitee.com/wyjpositive/mybatis-plus-dem ...
二级联动（两个下拉框的二级联动，和单选按钮与下拉框的二级联动）
1,两个下拉框的二级联动代码: <!DOCTYPE html><html lang="en"><head><meta charset=& ...
php jq ajax 4个下拉框联动案列,Ajax与Jquery结合数据库做出实现下拉框的二级联动...
这次给大家带来Ajax与Jquery结合数据库做出实现下拉框的二级联动,Ajax与Jquery结合数据库做出实现下拉框二级联动的注意事项有哪些,下面就是实战案例,一起来看一下. 首先我们需要先建立好数 ...
android加载时二级联动点击二级联动,Android实现联动下拉框二级地市联动下拉框功能...
日常使用软件中,为了方便且规范输入,会使用到下拉框进行输入,如注册时生日选项,购物时的地址输入,都会用到下拉框,今日笔者为了巩固已学的知识,实现了二级联动下拉框用作回顾及分享给求知的新手. 思路/步骤 ...
jquery ajax下拉联动,基于jQuery Ajax实现下拉框无刷新联动
本文实例为大家分享了jQuery Ajax实现下拉框无刷新联动的具体代码,供大家参考,具体内容如下 HTML代码: @{ Layout = null; } @using DAL; @using Sys ...
Vue封装下拉框组件时，为document绑定原生事件addEventlistener(click“)，切换页面之后事件还未被摧毁...
1 <script> 2 export default { 3 props: ["lists"], 4 data() { 5 return { 6 isactive: ...
jquery ajax java二级联动_使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例...
首先我们需要先建立好数据库,将一些数据插入进去需要两张表: province:省份表 city: 城市表如图: 然后再在java中建立相关的实体类与之对应再然后,我们就能开始做jdbc的操作了 ...

Vue.js下拉框-详细省市联动示例

Vue.js下拉框-详细省市联动示例相关推荐

最新文章

热门文章