用Vue.js来实现城市三级联动
<!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来实现城市三级联动的更多相关文章
- vue 使用element-ui实现城市三级联动
<template> <div> <el-select v-model="prov" style="width:167px;margin-r ...
- 全国城市三级联动 html+js
全国城市三级联动,没有css,所以屏幕的自适应必须自己想办法,手机端慎用(最好不要用,因为有些我也说不出的展示问题). html页面 <!DOCTYPE html> <html> ...
- 城市三级联动 AJAX-原生js封装
话不多说我们先来一张效果图给大家看一下: html代码如下: <!DOCTYPE html><html lang="en"><head> < ...
- jquery 城市三级联动
js代码 /*城市三级联动 * @method cityChange * @param allProvince,allCity,allDistrict */ function cityChange(p ...
- 转: javascript实现全国城市三级联动菜单代码
<html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv=" ...
- js 实现全国省市区三级联动
效果: index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...
- vue+element实现省区市三级联动以及详细地址的输入
Vue+elementui实现省区市三级联动+详细地址的输入 详细需求,需要手动更改用户所在的地址. 安装依赖项 npm install element-china-area-data -S 在组建中 ...
- JS 实现的年月日三级联动
js文件 SYT="-请选择年份-"; SMT="-请选择月份-"; SDT="-请选择日期-"; BYN=50;//年份范围往前50年 A ...
- js之省市区(县)三级联动效果
省市区(县)三级联动效果,是我们软件开发比较常用的,特别是对一些crm,erp之类,当然也包括其他的后台管理系统,基本都涉及到,今天贴出这个常用的,方便个人复用和大家使用 <!DOCTYPE h ...
随机推荐
- 关于概率算法的问题,不知道逻辑错在哪里,求debug
做个骰子成功几率的分析,投n颗骰子,第一次投成功的几率是a,然后投成功的骰子,需要再投1次,这次成功的几率是b.第二次成功的骰子才算最终成功. 要分析出n颗骰子,最终成功0到n颗的概率. 我写了个算法 ...
- jsLittle源码封装对象合并
JSLi.extend = JSLi.fn.extend = function () { var options, name, src, copy, target = arguments[0],i = ...
- T_SQL 日期函数
日期函数基数表达式的日期和时间或者是从时间间隔中返回值. GETDATE(),返回当前系统的日期和时间.例: SELECT GETDATE(); 结果为:2010-05-18 15:53:08.92 ...
- JAVA-截取字符串两边指定字符
工具类: /** * 工具类 */ public class Tool { /** * 截取两边指定的字符 * @param character * @param symbol * @return * ...
- iOS开发——导航栏的一些小设置
1.导航栏的隐藏与显示:navigationBarHidden - (void)viewWillAppear:(BOOL)animated { [super viewWillAppear:YES]; ...
- 【IDEA】Error: java: Compliance level '1.6' is incompatible with target level '1.8'. A compliance level '1.8' or better is required解决办法
在运行的时候常常出现如下错误: Error: java: Compliance level '1.6' is incompatible with target level '1.8'. A compl ...
- 洛谷P1280 && caioj 1085 动态规划入门(非常规DP9:尼克的任务)
这道题我一直按照往常的思路想 f[i]为前i个任务的最大空暇时间 然后想不出来怎么做-- 后来看了题解 发现这里设的状态是时间,不是任务 自己思维还是太局限了,题做得太少. 很多网上题解都反着做,那么 ...
- UVALive 6486 Skyscrapers 简单动态规划
题意: 有N个格子排成一排,在每个格子里填上1到N的数(每个只能填一次),分别代表每个格子的高度.现在给你两个数left和right,分别表示从左往右看,和从右往左看,能看到的格子数.问有多少种情况. ...
- uip UDP server广播模式(client能够随意port,而且主动向client发送数据)
眼下移植uip,发现UDP server模式下,必须指定本地port以及clientport,否则仅仅能讲clientport设置为0,才干接收随意port的数据,可是无法发送数据,由于此时clien ...
- java无依赖读取Excel文件
说到Java读取Excel文件,用得多的当然是POI或jxls,但今天在看一本书的时候.当中提到使用JdbcOdbcDriver这个驱动类在不依赖第三方库的情况下也能够完毕对Excel文件的读取操作, ...