<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
<style>
    .selBoxList{width:100%;margin-top:50px;text-align:center;}
    .selBoxList .selSt{min-width:100px;display:inline-block;position:relative;;}
    .selBoxList .selSt .current{width:100%;padding:0 10px;font-size:16px;line-height:30px;cursor:pointer;float:left;border:1px solid #ccc;background:#fff;box-sizing: border-box;position:relative;z-index: 2;}
    .selBoxList .selSt .box{width:100%;position:absolute;left:0;top:30px;border:1px solid #ccc;max-height:300px;overflow:auto;box-sizing: border-box;}
    .selBoxList .selSt .box span{width:100%;font-size:16px;line-height:30px;cursor:pointer;border-top:1px solid #ccc;float:left;}
    .selBoxList .selSt .box span:hover{background:#f1f1f1;}
</style>
</head>
<body>
<div class="selBoxList">
    <span class="selSt selProvince">
        <span class="current" @click="toggleSelect(0)"><span v-if="!proIndex">--请选择--</span><span v-if="proIndex">{{cityArr[proIndex].name}}</span></span>
        <span class="box" v-show="showSelect === 0">
            <span v-for="n in cityArr.length" @click="setOption('proIndex', $index)">{{cityArr[n].name}}</span>
        </span>
    </span>
    <span class="selSt selCity">
        <span class="current" @click="toggleSelect(1)"><span v-if="!cityIndex">--请选择--</span><span v-if="cityIndex">{{cityArr[proIndex].sub[cityIndex].name}}</span></span>
        <span class="box" v-show="showSelect === 1">
            <span v-if="cityArr[proIndex].sub.length" v-for="n in cityArr[proIndex].sub.length" @click="setOption('cityIndex', $index)">{{cityArr[proIndex].sub[n].name}}</span>
        </span>
    </span>
    <span class="selSt selArea">
        <span class="current" @click="toggleSelect(2)"><span v-if="!areaIndex">--请选择--</span><span v-if="areaIndex">{{cityArr[proIndex].sub[cityIndex].sub[areaIndex].name}}</span></span>
        <span class="box" v-show="showSelect === 2">
            <span v-if="cityArr[proIndex].sub[cityIndex].sub.length" v-for="n in cityArr[proIndex].sub[cityIndex].sub.length" @click="setOption('areaIndex', $index)">{{cityArr[proIndex].sub[cityIndex].sub[n].name}}</span>
        </span>
    </span>
</div>
<script src="http://passport.baidu.com/js/sitedata_bas.js" charset="GBK"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script>
var vm = new Vue({
    el: 'body',
    data: {
        cityArr: arrCity,
        proIndex: 0,
        cityIndex: 0,
        areaIndex: 0,
        showSelect: ''
    },
    methods: {
        setOption: function(type, index){
            this[type] = index;
            if(type === 'proIndex'){
                this.cityIndex = 0;
                this.areaIndex = 0;
            }
            if(type === 'cityIndex'){
                this.areaIndex = 0;
            }
            this.showSelect = '';
        },
        toggleSelect: function(n){
            if(this.showSelect === n){
                this.showSelect = '';
            }else{
                this.showSelect = n;
            }
        }
    }
})
</script>
</body>
</html>

来自：http://www.qdfuns.com/notes/15309/d4e088dd33ec99fb8811202bb879065e.html

　　

用Vue.js来实现城市三级联动的更多相关文章

  1. vue 使用element-ui实现城市三级联动

    <template> <div> <el-select v-model="prov" style="width:167px;margin-r ...

  2. 全国城市三级联动 html+js

    全国城市三级联动,没有css,所以屏幕的自适应必须自己想办法,手机端慎用(最好不要用,因为有些我也说不出的展示问题). html页面 <!DOCTYPE html> <html> ...

  3. 城市三级联动 AJAX-原生js封装

    话不多说我们先来一张效果图给大家看一下: html代码如下: <!DOCTYPE html><html lang="en"><head> < ...

  4. jquery 城市三级联动

    js代码 /*城市三级联动 * @method cityChange * @param allProvince,allCity,allDistrict */ function cityChange(p ...

  5. 转: javascript实现全国城市三级联动菜单代码

    <html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv=" ...

  6. js 实现全国省市区三级联动

    效果: index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...

  7. vue+element实现省区市三级联动以及详细地址的输入

    Vue+elementui实现省区市三级联动+详细地址的输入 详细需求,需要手动更改用户所在的地址. 安装依赖项 npm install element-china-area-data -S 在组建中 ...

  8. JS 实现的年月日三级联动

    js文件 SYT="-请选择年份-"; SMT="-请选择月份-"; SDT="-请选择日期-"; BYN=50;//年份范围往前50年 A ...

  9. js之省市区(县)三级联动效果

    省市区(县)三级联动效果,是我们软件开发比较常用的,特别是对一些crm,erp之类,当然也包括其他的后台管理系统,基本都涉及到,今天贴出这个常用的,方便个人复用和大家使用 <!DOCTYPE h ...

随机推荐

  1. 第一性原理：First principle thinking是什么？

    作者:沧海桑田链接:https://www.zhihu.com/question/40550274/answer/225236964来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...

  2. 联想服务器thinkserver TS550 Raid5制作及winserver2012R2 安装过来

    一. 联想服务器thinkserver TS550 Raid5制作 1.开机后按ctrl+i  进入raid配置模式 2.选择“1”配置所需Raid模式(这次配的是raid5) 3.按提示确认后退出 ...

  3. POJ-1456 Supermarket 贪心问题 有时间限制的最小化惩罚问题

    题目链接:https://cn.vjudge.net/problem/POJ-1456 此题与HDU-1789完全是一道题 题意 有N件商品,分别给出商品的价值和销售的最后期限,只要在最后日期之前销售 ...

  4. sed命令的介绍

    命令格式 sed [options] 'command' file(s) sed [options] -f scriptfile file(s) 选项 -e<script>或--expre ...

  5. Python对象引用的所有权

    目录 引用所有权 传递引用的所有权--返回值 出借引用的所有权--返回值 占据引用的所有权--参数 出借引用的所有权--参数 引用所有权 谁持有对象引用的所有权,谁就要对对象负责. 引用的所有权对函数 ...

  6. 紫书 例题 10-22 UVa 1640（数位统计）

    这道题的题解有几个亮点 一个是每次只统计一个数字来简化思维 一个是统计当前位数的时候分三个部分来更新答案 具体看代码,有注释 #include<cstdio> #include<cs ...

  7. CF17E Palisection（回文树）

    题意翻译 给定一个长度为n的小写字母串.问你有多少对相交的回文子 串(包含也算相交) . 输入格式 第一行是字符串长度n(1<=n<=2*10^6),第二行字符串 输出格式 相交的回文子串 ...

  8. 【Educational Codeforces Round 37 E】Connected Components?

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] bfs. 用一个链表来记录哪些点已经确定在某一个联通快里了. 一开始每个点都能用. 然后从第一个点开始进行bfs. 然后对于它的所有 ...

  9. PatentTips - Virtualizing performance counters

    BACKGROUND Generally, the concept of virtualization in information processing systems allows multipl ...

  10. 使用 gradle 在编译时动态设置 Android resValue / BuildConfig / Manifes中&lt;meta-data&gt;变量的值

    转载请标明出处:http://blog.csdn.net/xx326664162/article/details/49247815 文章出自:薛瑄的博客 你也能够查看我的其它同类文章.也会让你有一定的 ...