zoukankan html css js c++ java

vue下拉框三级联动

实现效果如下

html以及js代码

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>下拉框</title>

    </head>

    <body>
        <div id="test">
            单位：
            <select v-model="UnitSelected">
                <option v-for="item in UnitList" :value="item.id">{{item.name}}</option>
            </select>
            部门：
            <select v-model="DepartmentSelected">
                <option v-for="item in DepartmentList" :value="item.id">{{item.name}}</option>
            </select>
            用户：
            <select v-model="UserSelected">
                <option v-for="item in UserList" :value="item.id">{{item.name}}</option>
            </select>
        </div>
        <script src="js/vue.min.js" type="text/javascript"></script>
        <script>
            var UnitRows = [{
                    name: "1",
                    id: "1"
                },
                {
                    name: "2",
                    id: "2"
                },
            ];
            var DepartmentRows = [{
                    name: "11",
                    id: "1",
                    pid: "1"
                },
                {
                    name: "12",
                    id: "2",
                    pid: "1"
                },
                {
                    name: "21",
                    id: "3",
                    pid: "2"
                },
                {
                    name: "22",
                    id: "4",
                    pid: "2"
                }
            ];
            var UserRows = [{
                    name: "111",
                    id: "1",
                    pid: "1"
                },
                {
                    name: "112",
                    id: "2",
                    pid: "1"
                },
                {
                    name: "121",
                    id: "3",
                    pid: "2"
                },
                {
                    name: "122",
                    id: "4",
                    pid: "2"
                },
                {
                    name: "211",
                    id: "5",
                    pid: "3"
                },
                {
                    name: "212",
                    id: "6",
                    pid: "3"
                },
                {
                    name: "221",
                    id: "7",
                    pid: "4"
                },
                {
                    name: "222",
                    id: "8",
                    pid: "4"
                }
            ]
            var vm = new Vue({
                el: "#test",
                data: {
                    UnitSelected: "",
                    UnitList: [],
                    DepartmentSelected: "",
                    DepartmentList: [],
                    UserSelected: "",
                    UserList: []
                },
                created: function() {
                    this.UnitList = UnitRows;
                    this.UnitSelected = this.UnitList.length > 0 ? this.UnitList[0].id : "";

                    var val = this.UnitSelected;
                    this.DepartmentList = DepartmentRows.filter(function(x) {
                        return x.pid == val
                    });
                    this.DepartmentSelected = this.DepartmentList.length > 0 ? this.DepartmentList[0].id : "";

                    val = this.DepartmentSelected;
                    this.UserList = UserRows.filter(function(x) {
                        return x.pid == val
                    });
                    this.UserSelected = this.UserList.length > 0 ? this.UserList[0].id : "";
                },
                watch: {
                    UnitSelected: function(val) {
                        this.DepartmentList = DepartmentRows.filter(function(x) {
                            return x.pid == val
                        });
                        this.DepartmentSelected = this.DepartmentList.length > 0 ? this.DepartmentList[0].id : "";
                    },
                    DepartmentSelected: function(val) {
                        this.UserList = UserRows.filter(function(x) {
                            return x.pid == val
                        });
                        this.UserSelected = this.UserList.length > 0 ? this.UserList[0].id : "";
                    }
                }
            });
        </script>
    </body>

</html>

查看全文

相关阅读:
MSSQL_打开xp_cmdshell
想在win7 32bit的情况下装个64位虚拟机的想法
 查看系统已运行了多久
 sql弄个表结构出来..
在win下的cmd 的find
告别google.com.hk的龟速
 VC常用数据类型使用转换详解
 C++中的文件输入/输出ios:xx eat Processing(zz)
X86汇编语言学习手记(1)
程序员数据结构笔记

原文地址：https://www.cnblogs.com/xiede/p/9440607.html