layui二级联动(local模式)

news/2024/7/19 14:32:31 标签: layui, js, 前端, 二级联动

html代码

<div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">动物类别</label>
                        <div class="layui-input-inline">
                            <select name="animalType"  xm-select="animalType" lay-verify="required"
                                    xm-select-skin="default"
                                    xm-select-radio class="layui-input-block">
                                <option value="">请选择动物类别</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">动物名称</label>
                        <div class="layui-input-inline">
                            <select name="animalName" xm-select="animalName" lay-verify="required" xm-select-skin="default"
                                    xm-select-radio
                                    xm-select-search="" xm-select-search-type="dl">
                                <option value="">请选择动物名称</option>
                            </select>
                        </div>
                    </div>
                </div>

js代码

formSelects.on('animalType', function(id, vals, val, isAdd, isDisabled){
    $.ajax({
        url:setter.BASE_SERVER + "demo/list",
        //data 查询条件,根据动物类型查询动物名称
        data:{
            "animalType":val.type,
            "status":"1"
        },
        success:function(data){
            var data = data.res_data;
            var selectData = [];
            //拼写数据结构
            for (var i = 0 ; i < data.length ; i ++){
                var eachData = {name:data[i].animalName,value:data[i].id}
                selectData.push(eachData);
                //selectData的数据结构
                //[
                //    {"name": "燕子", "value": 1},
                //    {"name": "麻雀", "value": 2},
                //    {"name": "老鹰", "value": 3},
                //    {"name": "白鹤", "value": 4},
                //]
            }

            //local模式
            formSelects.data('animalName', 'local', {
                arr: selectData
            });
        }
    });
});

PS:在网上找了好多layui的级联demo,每个是都不太符合我的需求,最后根据文档自己写了一个。


http://www.niftyadmin.cn/n/1230003.html

相关文章

子查询的使用

<!--查询列表--><select id"selMap" parameterType"java.util.HashMap" resultType"java.util.HashMap">SELECTa.id,a.building_name,a.number_floor,DATE_FORMAT( a.create_time, "%Y-%m-%d " ) AS create_time,( SELECT…

CDH大数据平台搭建(实战)

一、环境信息 序号IP地址主机名系统版本CDH版本内存处理器硬盘1192.168.6.104CDH01CentOS Linux release 7.2.15115.10.08G12300G2192.168.6.105CDH02CentOS Linux release 7.2.15115.10.08G12300G3192.168.6.106CDH03CentOS Linux release 7.2.15115.10.08G12300G二、基础环境…

Mybatis之choose(where,otherwise)标签

choose (when, otherwise)标签 有时候我们并不想应用所有的条件&#xff0c;而只是想从多个选项中选择一个。而使用if标签时&#xff0c;只要test中的表达式为 true&#xff0c;就会执行 if 标签中的条件。MyBatis 提供了 choose 元素。if标签是与(and)的关系&#xff0c;而 ch…

KJava虚拟机hack笔记-编译

转载时请注明出处和作者联系方式 文章出处&#xff1a;http://www.limodev.cn/blog 作者联系方式&#xff1a;李先静 <xianjimli at hotmail dot com> KJava 虚拟机有两个版本&#xff0c;一个针对智能手机等设备的phoneme_advanced&#xff0c;另一个是针对传统手机(fe…

Linux在线安装MariaDB-5.5.65

1、安装环境 系统版本内存处理器内核总数硬盘MariaDB版本CentOS Linux release 7.2.1511 (Core)1G240G5.5.652、卸载MariaDB yum remove mariadb-server -y3、安装MariaDb yum install mariadb-server -y4、配置MariaDB 安装完成后首先要把MariaDB服务开启&#xff0c;并设置…

RuoYi 若依平台登录密码忘记了-如何解决

找到工具类&#xff1a;com.ruoyi.common.utils.SecurityUtils 添加main方法&#xff1a;打印出密码密文 我创建的密码是 789789 生成的密文就是&#xff1a;$2a$10$TPMePNoueBTHrwciakLVj.NncWtVcK/ojRuQ6sBg1RA3czVnesPwu 点击run启动main方法 这样就生成密文了 然后…

Linux在线安装MySQL-5.7.31

1、安装环境 系统版本内存处理器内核总数硬盘MySQL版本CentOS Linux release 7.2.1511 (Core)1G240G5.7.31 查看系统版本命令&#xff1a; cat /etc/redhat-release2、查看并卸载已安装的MySQL 查看 rpm -qa | grep mysql卸载 rpm -e --nodeps [mysql组件]2、下载并安装My…

Linux离线安装MySQL-5.7.31

1、安装环境 系统版本内存处理器内核总数硬盘MySQL版本CentOS Linux release 7.2.1511 (Core)1G240G5.7.31 下载地址&#xff1a;https://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.31-1.el7.x86_64.rpm-bundle.tar 2、检查卸载MySQL|mariadb #检查 rpm -qa | grep mys…