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>

查看全文

相关阅读:
怎么能让json_decode解析带斜杠的字符串
 **PHP转义Json里的特殊字符的函数
 sql中exists,not exists的用法
 **mysql数据库中实现内连接、左连接、右连接
 **PHP foreach 如何判断为数组最后一个最高效?
mysql sql语句中用括号处理or和and的运算顺序
 iOS图片缓存
 linux regulator之浅见【转】
Linux中THIS_MODULE宏定义详解
 likely()与unlikely()

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