<!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. 彻底删除windows残留启动引导

    在win7/Win8系统下安装其他系统或者一键重装系统后,安装的系统删除或者一键重装文件删除了,在windows启动管理器中还残留了启动引导选项,影响开机效率. 在系统配置中有些"引导&qu ...

  2. HDU 5333 Undirected Graph（动态树）

    题意 给定一棵 \(n\) 个节点, \(m\) 条边的无向图,每个点有点权,有 \(q\) 个询问,每次询问若删去存在一个节点权值在 \([L,R]\) 范围外的边,剩下的图构成了多少个连通块(询问 ...

  3. MSF MS17_010漏洞测试

    0x00 window 2003 R2 x86 use exploit/windows/smb/ms17_010_eternalblue show options set rhost 192.168. ...

  4. MongoDB 教程（七）：插入文档、更新文档、删除文档

    MongoDB 插入文档 文档的数据结构和JSON基本一样. 所有存储在集合中的数据都是BSON格式 —— BSON是一种类json的二进制形式的存储格式,简称Binary JSON. MongoDB ...

  5. 【Jenkins】testng+testNgXslt+ant优化测试报告

    步骤: 准备: testng-results.xsl saxon-8.7.jar 下载地址:http://download.csdn.net/download/a804229570/10210509 ...

  6. leetcode python 010

    #实现正则表达式匹配并支持'.'和'*'.#''匹配任何单个字符.#'*'匹配前面元素的零个或多个.#匹配应覆盖整个输入字符串(非部分).##Some examples:##isMatch(" ...

  7. jq demo 轮播图，图片可调用，向上，自动+鼠标点击切换

    1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...

  8. 通过进程link路径（快捷方式路径）得到进程完整路径

    程序中遇到的问题及解决方法: #error WINDOWS.H already included. MFC apps must not #include <windows.h>解决方法:把 ...

  9. python笔记10-切片（从list或字符串中取几个元素）

    name1 = 'zcl,pyzyz'names = ['zcl','py','zyz'] #切片的意思就是从list里面或者字符串里面取几个元素#切片操作对字符串也是完全适用的 # print(na ...

  10. Git 与SVN

    SVN 是集中式版本控制系统: 先说集中式版本控制系统,版本库是集中存放在中央服务器的,而干活的时候,用的都是自己的电脑,所以要先从中央服务器取得最新的版本,然后开始干活,干完活了,再把自己的活推送给 ...