Html代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>下拉框</title>

    <link href="../public/stylesheets/bootstrap.min.css" rel="stylesheet" type="text/css">

    <script src="../public/javascripts/jquery.js" type="text/javascript"></script>

    <script src="../public/javascripts/bootstrap.min.js" type="text/javascript"></script>

    <script src="../public/javascripts/vue.js" type="text/javascript"></script>

</head>

<div class="row"  id="selectOptions">

    <div class="col-md-3">

       <h4> {{preTitle}}</h4>

    </div>

<div class="col-md-3">

<div class="dropdown">

    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

         {{title}}

        <span class="caret"></span>

    </button>

    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">

        <li v-for="item in countrys"><a href="#" v-on:click="warn">{{item.country}}</a></li>

    </ul>

</div>

</div>

<div class="col-md-3">

    <div class="dropdown">

        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

            {{title2}}

            <span class="caret"></span>

        </button>

        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">

            <li v-for="item in items2"><a href="#" v-on:click="warn2">{{item.province}}</a></li>

        </ul>

    </div>

</div>

<div class="col-md-3">

    <div class="dropdown">

        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

            {{title3}}

            <span class="caret"></span>

        </button>

        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">

            <li v-for="item in items3"><a href="#" v-on:click="warn3">{{item.city}}</a></li>

        </ul>

    </div>

</div>

</div>

</body>

</html>

　　Js部分：

<script>

    var vm=new Vue({

        el:"#selectOptions",

        data:{

            preTitle:"联动下拉框",

            title:"国家",

            title2:"省份",

            title3:"市区",

            countrys:[

                {country:"中国"},

                {country:"美国"},

                {country:"日本"}

            ],

            items2:[],

            items3:[]

        },

        methods:{

            warn:toSelect2,

            warn2:toSelect3,

            warn3:recordSelect3,

        }

    });

   function toSelect2(event){

       vm.items2=[];

       var content=event.target.text;

       vm.title=content;

       var provinces=[{province:"江苏省"},{province:"浙江省"},{province:"上海市"}];

       for(var item in provinces){

           vm.items2.push(provinces[item]);

       }

   }

    function toSelect3(event){

        vm.items3=[];

        var content=event.target.text;

        vm.title2=content;

        var citys=[{city:"南京市"},{city:"无锡市"},{city:"苏州市"}];

        for(var item in citys){

            vm.items3.push( citys[item]);

        }

    }

    function recordSelect3(event){

        var content=event.target.text;

        vm.title3=content;

    }

</script>

　　请按顺序依次加载所需库文件。

Vue.js组件之联动下拉框的更多相关文章

  1. JS年月日三级联动下拉框日期选择代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. javascript实例学习之一——联动下拉框

    经常碰到这样的需求,如省市_城市_乡镇下拉框.后一个下拉框的内容会根据前一个的改变而改变,之前的解决方法往往是在前一个改变的时候,向后台发送请求临时获取对应的内容.这样每触发一次就会网络请求一次,这种 ...

  3. jQuery实现的3个基础案例（仿QQ列表分组，二级联动下拉框，模拟员工信息管理系统）

    1.仿QQ列表分组 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...

  4. vue 获取数据联动下拉框select ，并解决报Duplicate value found in v-for="...": "". Use track-by="$index" 错误

    公司项目中遇到一个问题,联动下拉框,并且数据是使用vue-resource从后台获取的,格式不利于输出联动下拉框,联动下拉框是第一个下拉框输出一个数组里每一项json的一个text值,从而第二下拉框输 ...

  5. ajax 多级联动 下拉框 Demo

    写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...

  6. SharePoint 2013 使用查阅项实现联动下拉框

    SharePoint列表使用中,经常会用到下拉框,而有些特殊的需求,会用到联动的下拉框,在SharePoint中默认没有这样的字段,所以如果实现,我们需要自己想办法. 这里,我们介绍如何使用JQuer ...

  7. JQ与AJAX 省市区三级联动下拉框

    用于初学者学习基本的联动下拉框,废话不多说,见代码 首先看控制器里的3个下拉框对应代码: public ActionResult GetProvinceList() { ProvinceReposit ...

  8. jq实现简单的二级联动下拉框

    1 效果图 2 html <!DOCTYPE html> <html lang="en"> <head>     <meta charse ...

  9. css配合js模拟的select下拉框

    css配合js模拟的select下拉框 <!doctype html> <html> <head> <meta charset="utf-8&quo ...

随机推荐

  1. Linux/CentOS下开启MySQL远程连接，远程管理数据库

    当服务器没有运行PHP.没装phpMyAdmin的时候,远程管理MySQL就显得有必要了. 第一步:开启MySQL用户的远程访问权限 mysql -u root -p mysql # 第1个mysql ...

  2. 【Android学习】《Android开发视频教程》第二季笔记（未完待续）

    视频地址: http://study.163.com/course/courseMain.htm?courseId=207001 课时22  Activity生命周期(一) 1.如何在一个应用中添加新 ...

  3. angular-ui-bootstrap-modal必须要说的几个点(转)

    angular-ui-bootstrap-modal必须要说的几个点 摘要: 基于angular来实现的一个bootstrap模态框,有些不得不说的地方 项目中以前就经常用到模态框,但是一直没有时间来 ...

  4. senlin __init__() got an unexpected keyword argument 'additional_headers'

    从senlin源码重新编译更新了服务,然后执行 senlin的 cli就遇到了错误: __init__() got an unexpected keyword argument 'additional ...

  5. effective OC2.0 52阅读笔记（七 系统框架）

    47 熟悉系统框架 总结:将代码封装为动态库,并提供接口的头文件,就是框架.平时的三方应用都用静态库(因为iOS应用程序不允许在其中包含动态库),并不是真正的框架,然而也经常视为框架.例如:NSLin ...

  6. 初学Redis（1）——认识Redis

    Redis官网对Redis的定义是:“Redis is an open source, BSD licensed, advanced key-value cache and store”,可以看出,R ...

  7. 由一段字符串中查找URL引出——正则表达式

    需求很简单,是从一段文本中匹配出其中的超链接.基本的做法就是用正则表达式去匹配.但是有这样一个问题. 网上大部分的识别URL的正则表达式url末尾有空格的情况下可以正确识别.比如这样的情况: &quo ...

  8. mysql 分表

    1.分表,即把一个很大的表达数据分到几个表中,这样每个表数据都不多. 优点:提高并发量,减小锁的粒度 缺点:代码维护成本高,相关sql都需要改动 2.分区,所有的数据还在一个表中,但物理存储数据根据一 ...

  9. CozyRSS开发记录2-酷炫的皮肤库

    CozyRSS开发记录2-酷炫的皮肤库 1.MaterialDesignToolkit 最开始微软推出Metro设计风格的时候,有人喜欢有人喷.紧接着,Ios也开始做扁平化的UI,这时候,扁平化已成为 ...

  10. SVG实现导航动画

    效果图动画后 html <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> ...