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. XMPP作为一个工具的意义

    学习XMPP就是拥有位当前应用程序添加实时,推送,社交功能所需的工具.虽然浏览器不支持XMPP通讯,但是我们可以通过BOSH技术解决. 一个XMPP网络包含如下 服务器:为XMPP节提供路由,是否支持 ...

  2. jQuery入门（4）jQuery中的Ajax应用

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  3. PF_INET 和 AF_INET 的区别

    在写网络程序的时候,建立TCP socket: sock = socket(PF_INET, SOCK_STREAM, 0); 然后再绑定本地地址或连接远程地址时需要初始化sockaddr_in结构, ...

  4. Linux网络下载命令 wget 简介

    wget 是一个命令行的下载工具.对于我们这些 Linux 用户来说,几乎每天都在使用它.下面为大家介绍几个有用的 wget 小技巧,可以让你更加高效而灵活的使用 wget. $ wget -r -n ...

  5. C和指针 第五章 位数组

    5.4的习题:编写一组函数,实现维数组,函数原型如下: //指定位设置为1void set_bit(char bit_array[], unsigned bit_number); //指定位清零 vo ...

  6. word20161208

    EAP, Extensible Authentication Protocol / 可扩展身份验证协议 EFS, encrypting file system / 加密文件系统 embedded ob ...

  7. 【目录】 hadoop2.6.0

    hadoop2.6.0 安装+例子运行 数据丢失问题解决 通过代码运行程序流程 利用Hadoop的 Java API 利用JAVA API 实现数据上传

  8. vs2010 在64bits系统下编译

    vs只有32bits的没有64bits. 本来程序没问题,后面一直报错 LIBCMTD.lib(close.obj) : error LNK2001 LNK2019 换了各种 MD/MT/MTD 都没 ...

  9. 【转载】CentOS服务器配置VPN详解

    转载来自: https://bbs.aliyun.com/read/162297.html http://www.wanghailin.cn/centos-7-vpn/ 操作系统:CentOS 6.3 ...

  10. wechall.net/stegano 解题心得

    /* 转载请注明出处:http://www.cnblogs.com/Martinium/p/wechall_stegano.html */ 最近迷上了 www.wechall.net 网站,里面都是些 ...