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. Ubuntu 12/14 个性化配置

    计算机名:jianbao-pc    用户名:jianbao 修改 /opt目录的 用户名 及 用户组 : sudo chown -R jianbao:jianbao /opt Ubuntu 如何开启 ...

  2. CentOS下安装JDK1.7

    1.安装包准备: 首先到官网下载jdk,http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.h ...

  3. 欧拉函数 - HDU1286

    欧拉函数的作用: 有[1,2.....n]这样一个集合,f(n)=这个集合中与n互质的元素的个数.欧拉函数描述了一些列与这个f(n)有关的一些性质,如下: 1.令p为一个素数,n = p ^ k,则 ...

  4. MST 001

    一.String,StringBuffer, StringBuilder 的区别是什么?String为什么是不可变的? 答:   1.String是字符串常量,StringBuffer和StringB ...

  5. Xtrabackup 安装使用

    一 简介:      Xtrabackup是一个对InnoDB做数据备份的工具,支持在线热备份(备份时不影响数据读写),是商业备份工具InnoDB Hotbackup的一个很好的替代品.它能对Inno ...

  6. c/c++字符串定义及使用的对比

    c/c++中使用字符串的频率还是比较高的,下面就字符串的不同定义及其使用方法做一些对比 字符串一般有以下三种定义方法: 1.char *p="hello"; 2.char str[ ...

  7. 问题：QXcbConnection: Could not connect to display

    Wkhtmltopdf 失败 (错误代码: -6). 消息: The switch --header-spacing, is not support using unpatched qt, and w ...

  8. 导入excel数据到数据库

    1.上传excel到服务器 jsp页面代码 <form action="actionname" method="post" id="form1& ...

  9. SQL Server 临时禁用和启用所有外键约束（高版本向低版本迁移数据）

    --获得禁用所有外键约束的语句 select 'ALTER TABLE [' + b.name + '] NOCHECK CONSTRAINT ' + a.name +';' as 禁用约束 from ...

  10. seajs和requirejs

    一.seajs 1. 使用seajs的一般步骤 a)在主页面引入sea.js b)写模块 c)在主页面使用模块 2.模块的写法 math.js define(function(require, exp ...