vue day3 bootstrap 联动下拉

时间：2021-07-29 03:01:46
 <!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&equals;&quot&semi;&period;&period;&period;&quot&semi;&colon; &quot&semi;&quot&semi;&period; Use track-by&equals;&quot&semi;&dollar;index&quot&semi; 错误

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

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

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

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

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

  4. ajax 多级联动 下拉框 Demo

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

  5. &lpar;实用篇&rpar;jQuery&plus;PHP&plus;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. 安卓四大组件之activity和获取网络资源之断点续传

    Day05 数据存储及多线程断点续传1.数据提交到服务器两种方式的优缺点* GET请求优点:使用非常方便,只需要在url后面组拼数据.缺点:数据在url的后面组拼,不安全.有数据长度限制.* POST ...

  2. javaweb学习总结&lpar;二十三&rpar;——jsp自定义标签开发入门

    一.自定义标签的作用 自定义标签主要用于移除Jsp页面中的java代码. 二.自定义标签开发和使用 2.1.自定义标签开发步骤 1.编写一个实现Tag接口的Java类(标签处理器类) 1 packag ...

  3. WP8&period;1 Study5：Data binding数据绑定

    一.数据绑定 最简单的编程UI控件的方法是写自己的数据来获取和设置控件的属性,e.g. , textBox1.Text = "Hello, world"; 但在复杂的应用程序,这样 ...

  4. windows下安装配置Xampp

    XAMPP是一款开源.免费的网络服务器软件,经过简单安装后,就可以在个人电脑上搭建服务器环境.本文为大家介绍Windows中安装XAMPP(Apache+Mysql+PHP)及使用方法及其相关问题的总 ...

  5. 老李分享：webservice是什么？2

    web service 组件 基本的 web service 平台是 XML + HTTP.所有标准的 web service 使用以下组件: SOAP(简单对象访问协议) UDDI(通用描述.发现与 ...

  6. 修改Tomcat访问的端口号

    修改Tomcat端口号步骤: 1.找到Tomcat目录下的conf文件夹 2.进入conf文件夹里面找到server.xml文件 3.打开server.xml文件 4.在server.xml文件里面找 ...

  7. springboot项目

    https://my.oschina.net/ityouknow/blog/1629066

  8. AVL Tree Insertion

    Overview AVL tree is a special binary search tree, by definition, any node, its left tree height and ...

  9. docker原理与上帝进程

    做个笔记, 先水一会. 虚拟机指的是: 在软件的层面上通过模拟硬件进行的输入输出. docker原理:docker就是一个linux系统的进程, 它通过 Linux 的 namespaces 对不同的 ...

  10. DLNg序列模型第二周NLP与词嵌入

    1.使用词嵌入 给了一个命名实体识别的例子,如果两句分别是“orange farmer”和“apple farmer”,由于两种都是比较常见的,那么可以判断主语为人名. 但是如果是榴莲种植员可能就无法 ...

相关文章