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零基础入门总结

    啊,notepad++贴过来怎么对齐格式这么糟糕呢? #root用户 $普通用户   linux命令 清屏clear翻页清屏  CRT中ctrl+L    reset"清空 CRT中不起作用 ...

  2. Node.js Stream - 实战篇

    邹斌 ·2016-07-22 11:04 背景 前面两篇(基础篇和进阶篇)主要介绍流的基本用法和原理,本篇从应用的角度,介绍如何使用管道进行程序设计,主要内容包括: 管道的概念 Browserify的 ...

  3. Windows平台下Qt中glut库的使用

    用Qt中的QGLWidget窗体类中是不包括glut工具库的,难怪在myGLWidget(在我的程序中是QGLWidget的派生类)中绘制实心球体是说“glutSolidSphere”: 找不到标识符 ...

  4. Ruby常用比较操作符

    操作符 含义 == 测试值是否相等 ==== 用来比较case语句的目标和每个when从句的项 <=>  通用比较操作符. 根据接受者小于, 等于, 大于其参数, 返回-1, 0. 1 & ...

  5. CF memsql Start[c]UP 2.0 B

    CF memsql Start[c]UP 2.0 B B. Distributed Join time limit per test 1 second memory limit per test 25 ...

  6. 【荐】PHP采集工具curl快速入门教程

    为什么要用CURL? CURL(Client URL Library Functions)是一个利用URL语法在命令行方式下工作的文件传输工具.它支持很多协议:FTP, FTPS, HTTP, HTT ...

  7. Linux C 字符串输入函数 gets()、fgets()、scanf() 详解

    一.gets() 函数详解 gets()函数用来从 标准输入设备(键盘)读取字符串直到 回车结束,但回车符('\n')不属于这个字符串. 调用格式为: gets(str); 其中str为字符串变量(字 ...

  8. Apache Rewrite匹配问号的问题

    在写RewriteRule准备匹配url中的问号及后面的参数时,怎么弄都无法成功.正则的写法经过测试是正确的,问号也已经转义\?,可还是不行. 百度查询了下,RewriteRule 不会去匹配问号?后 ...

  9. Android 双击 Back 键退出程序

    双击退出程序的原理无非就是设置一个退出标识(询问是否退出),如果改变了这个标识(确认退出),则再次点击时立马退出,如果短时间内没有退出,则延时重置这个标识(不退出). ================ ...

  10. SQL查询语句行转列横向显示

    http://blog.163.com/dreamman_yx/blog/static/26526894201121595846270/