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. 关于Spring中的<context:annotation-config/>配置

    当我们需要使用BeanPostProcessor时,直接在Spring配置文件中定义这些Bean显得比较笨拙,例如: 使用@Autowired注解,必须事先在Spring容器中声明AutowiredA ...

  2. js闭包的作用域以及闭包案列的介绍：

    转载▼ 标签: it   js闭包的作用域以及闭包案列的介绍:   首先我们根据前面的介绍来分析js闭包有什么作用,他会给我们编程带来什么好处? 闭包是为了更方便我们在处理js函数的时候会遇到以下的几 ...

  3. nyoj 下三角矩阵

    Problem A 下三角矩阵 时间限制:1000 ms  |  内存限制:65535 KB 描述 给定一个由0和1组成的矩阵.只允许交换相邻的两行,要把矩阵转化成下三角矩阵(主对角线上方的元素都是0 ...

  4. itrator控制迭代次数

    <s:iterator value="diys" status="d" begin="0" end="10" st ...

  5. 禁用PHP函数，可以对php.ini进行配置

    php.ini 里有个 disable_functions 开关选项,此选项可关闭一些危险的函数,比如system,exec 等.比如: disable_functions = phpinfo , 如 ...

  6. 【重点】Shell入门教程：流程控制（2）条件判断的写法

    第三节:条件判断的写法 if条件判断中,if的语法结构中的“条件判断”可以有多种形式.测试结果是真是假,就看其传回的值是否为0. 条件测试的写法,有以下10种: 1.执行某个命令的结果 这里的命令,可 ...

  7. Alpha版本冲刺总结——曙光初现

    No Bug 031402401鲍亮 031402402曹鑫杰 031402403常松 031402412林淋 031402418汪培侨 031402426许秋鑫 项目预期计划 界面设计 androi ...

  8. android:layout_height、android:layout_width、android:height、android:width的关系与区别

    一直一来对android:layout_height.android:layout_width.android:height.android:width这几个属性的关系有些不理解,既然有了androi ...

  9. Extjs 制作柱状图

    在JSP页面制作柱状图,可以根据数据的变化动态实时的变化 主要是使用EXTJS自带的插件达到效果 Ext.require('Ext.chart.*'); Ext.require([ 'Ext.Wind ...

  10. SQL/T-SQL实例参考

    ,D.[Score] B_Score ,'Distince'= CASE WHEN C.Score > D.Score THEN C.[Score] - D.[Score] WHEN C.Sco ...