<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Page Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />

    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

    <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>

    <style type="text/css">

        .conditions * {

            display: inline;

            width: 200px;

            margin-left: 150 px;

            margin-top: 20px;

            margin-bottom: 2px;

        }

        .btn-default {

            width: 120px;

            margin-left: 5px;

            margin-top: 5px;

            margin-bottom: 10px;

        }

        .dropdown-toggle {

            width: 30px;

        }

    </style>

</head>

<body>

        <body>

                <div id="divContent"  class="conditions" style="height:auto" >

                    <select v-model="OneData" class="form-control">

                        <template v-for="item in selOneVal">

                                <option v-bind:value="item.value">{{item.text}}</option>

                        </template>

                    </select>

                    <select v-model="TwoData" class="form-control">

                        <template v-for="item in selTwoVal">

                                <option v-bind:value="item.value">{{item.text}}</option>

                        </template>

                    </select>

                </div>

              </body>

</body>

    <script type="text/javascript">

        $(function () {

            vm.OneChange();

        })

        var vm = new Vue({

            el: '#divContent',

            data: {

                selOneVal: [],

                selTwoVal: [],

                selThreeVal: [],

                OneData: '国家',

                TwoData: '',

            }, methods: {

                OneChange: function () {

                    vm.selOneVal = [];

                    this.selOneVal.push(

                        { value: '国家', text: '国家' },

                        { value: '1', text: '中国' },

                        { value: '2', text: '法国' },

                    )

                    this.selTwoVal.push({ value: '省级', text: '省级' })

                }

            }

               , watch: {

                   OneData: function () {

                       vm.selTwoVal = [];

                       vm.selThreeVal = [];

                       this.selTwoVal.push({ value: '省级', text: '省级' })

                       var s1 = vm.OneData;

                       if (s1 == 1) {

                           this.selTwoVal.push(

                       { value: '1', text: '湖南' },

                       { value: '2', text: '湖北' },

                       { value: '3', text: '上海' })

                       } else if (s1 == 2) {

                           this.selTwoVal.push(

                    { value: '4', text: 'Paris' },

                    { value: '5', text: 'Nanc' },

                    { value: '6', text: 'Rouen' })

                       }

                       vm.TwoData = '省级';

                   },

               }

        })

    </script>

</html>

　　

vue day3 bootstrap 联动下拉的更多相关文章

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

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

  2. vue elementui二级联动下拉选项demo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Vue.js组件之联动下拉框

    Html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  4. ajax 多级联动 下拉框 Demo

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

  5. (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单

    二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类:  前端技术 ...

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

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

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

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

  8. 基于jQuery美化联动下拉选择框

    今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

  9. PHP用ajia代码写三级联动下拉

    下面是我做三级联动下拉的步骤以及逻辑 第一步:先做一个省市区表格 第二步:建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息,里面嵌入jquer ...

随机推荐

  1. 自动化测试系列：自动化测试KPI考评的一种方法

    更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 原文链接:http://www.cnblogs.com/zishi/p/6856204.html 众所周知,在IT ...

  2. promise封装的ajax

    var  myNewAjax=function(url){ return new Promise(function(resolve,reject){ var xhr = new XMLHttpRequ ...

  3. 1_Linux概述

    linux就是一套操作系统 //系统调用与内核如果能够参考硬件的功能函数并修改你的操作系统程序代码,那经过改版后的操作系统就能够在另一个硬件平台上面运行了,这个操作通常被称为"软件移植&qu ...

  4. js中实现截取数组的后几个元素作为一个新数组的方法

    有时候我们会遇到这种需求,截取数组中后5个元素作为一个新数组,且顺序不能变.数组中的slice()方法和splice()方法都可以实现这样的操作. const arr = [1,2,7,2,6,0,3 ...

  5. vue 2.0 使用replace时要点击路由多次才能返回

    项目中有一个选择机场的需求,从表单页面--->机场页面(选择出发机场)-->表单页面-->机场页面(选择到达机场); 如果只用push跳转的话,页面返回必然会返回机场选择页面. 所以 ...

  6. AngularJS服务及注入--Provider

    Provider简介 在AngularJS中,app中的大多数对象通过injector服务初始化和连接在一起. Injector创建两种类型的对象,service对象和特别对象. Service对象由 ...

  7. Spring中的@Async

    在Java应用中,绝大多数情况下都是通过同步的方式来实现交互处理的:但是在处理与第三方系统交互的时候,容易造成响应迟缓的情况,之前大部分都是使用多线程来完成此类任务,其实,在spring 3.x之后, ...

  8. 从多个角度来理解协方差（covariance）

    起源:协方差自然是由方差衍生而来的,方差反应的是一个变量(一维)的离散程度,到二维了,我们可以对每个维度求其离散程度,但我们还想知道更多.我们想知道两个维度(变量)之间的关系,直观的举例就是身高和体重 ...

  9. C# 获取往控件中拖进的文件或文件夹的信息

    C# 获取往控件中拖进的文件或文件夹的信息(原创)       在做C#的WinForm开发的时候,有时需要用户往指定的控件中拖进文件或者文件夹.然后根据用户拖进来的文件或者文件夹获取其信息并进行下一 ...

  10. webpack2与promise在IE环境下

    webpack2好像说是要自己编译es6,但是结果不是很理想,es6的箭头函数他就没有编译,所以目前还是先用babel来转换吧, 之前用的ajax是axios,底层是promise,但是promise ...