首页 > 其他分享 >layui框架中利用xm-select实现下拉多选功能,以及如何设置默认值

layui框架中利用xm-select实现下拉多选功能,以及如何设置默认值

时间:2025-01-02 14:09:24浏览次数:1  
标签:arr name xm layui element let 默认值 select

xm-select.js的下载地址:https://gitee.com/maplemei/xm-select/tree/master/dist

引入xm-select.js

<script src="/static/tools/pear/component/pear/xm-select.js"></script>

 dom元素

<div id="doors"></div>

 layui中使用

layui.use(['form', 'jquery', 'select'], function () {
            let form = layui.form;
            let $ = layui.jquery;


            let select_arr = [];
            let xmselect_dom;

            // 初始化多选下拉框
            xmselect_dom = xmSelect.render({
                el: '#doors',  // 选择器
                name: 'doors',       // input name 
                max: 2,
                data: []
            });

 动态渲染并给默认选中值

$.ajax({
                url: "{:url('user/get_xiu_door')}",
                data: {
                    staffid: staffid,
                    areaid: areaid
                },
                dataType: 'json',
                type: 'post',
                success: function (res) {
                    console.log(res);
                    let arr = []
                    let arr0 = []
                    for (let i = 0; i < res.length; i++) {
                        const element = res[i];
                        if (!element.staff && !element.staff1 && !element.staff) {
                            arr.push({ name: element.num, value: element.id })
                        } else {
                            arr.push({ name: element.num, value: element.id })
                            arr0.push(element.id)
                        }
                    }
                    select_arr = arr
                    console.log(arr);
                    // 初始化多选下拉框
                    xmselect_dom = xmSelect.render({
                        el: '#doors',  // 选择器
                        name: 'doors',       // input name 
                        max: 2,
                        data: select_arr, //下拉的数据
                        initValue: arr0   //默认选中的值 如:[6,7]
                    });
                }
            })

  

标签:arr,name,xm,layui,element,let,默认值,select
From: https://www.cnblogs.com/weijiaying/p/18647537

相关文章

  • 第11章 其他 XML 技术
    第11章其他XML技术概述System.Xml命名空间由以下命名空间和核心类型构成:​System.Xml.*​​XmlReader​和XmlWriter​:高性能、前向读写的XML流​XmlDocument​:基于W3C标准DOM(已过时)的XML文档​System.Xml.Linq​:全新的以LINQ为中心的XMLDOM(请参见第10章L......
  • ES6的解构赋值时如何设置默认值?
    在ES6中,解构赋值允许你设置默认值。这在你想要确保某个变量在被解构时有一个特定的值(如果原始对象中没有该属性或者该属性的值是undefined)时非常有用。以下是一些设置默认值的示例:1.对象的解构赋值constobj={a:1,b:2};const{a=3,b=4,c=5}=obj;console......
  • Maven-pom.xml引入包冲突
    日志包冲突LoggerFactoryisnotaLogbackLoggerContextbutLogbackisontheclasspath.EitherremoveLogbackorthecompetingimplementation(classorg.apache.logging.slf4j.Log4jLoggerFactoryloadedfromfile:/Users/yuqiu/.m2/repository/org/apache/logging/l......
  • C# 创建XML文件
    C#创建XML文件|Id|Title|DateAdded|SourceUrl|PostType|Body|BlogId|Description|DateUpdated|IsMarkdown|EntryName|CreatedTime|IsActive|AutoDesc|AccessPermission||-------------|-------------|-------------|-------------|---------......
  • 第10章 LINQ to XML
    第10章LINQtoXML10.1架构概述——DOM和LINQtoXML的DOMXML文档可以用一棵对象树完整的表示,这称为“文档对象模型(documentobjectmodel)”LINQtoXML由两部分组成:XMLDOM,简称为X-DOM大约10个查询运算符LINQ也可以用于查询W3C标准的旧DOM,不过X-DOM对L......
  • WXML
    WXMLWXML(WeiXinMarkupLanguage)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。用以下一些简单的例子来看看WXML具有什么能力:数据绑定<!--wxml--><view>{{message}}</view>//page.jsPage({data:{message:'HelloMINA!'}})列......
  • 前端必知必会-JSON 与 XML
    文章目录JSON与XMLJSON与XML相似,因为JSON与XML不同,因为JSON优于XML的原因使用XML步骤使用JSON步骤总结JSON与XMLJSON和XML均可用于从Web服务器接收数据。以下JSON和XML示例均定义了一个雇员对象,其中包含3名雇员的数组:JSON示例{"empl......
  • layui: 安装使用
    一,官网:https://layui.dev/如图:二,下载:1,下载:2,也可以直接使用第三方cdn引入css/js文件:例子:<!--layui--><linkhref="https://unpkg.com/layui@2.9.21-rc/dist/css/layui.css"rel="stylesheet"><scriptsrc="https://unpkg.com/layui@2......
  • el-select组件改造成多选显示多个标签加数字标签的形式并且点击某个默认值不允许删除
     单独设置一个文件当做公共组件调用<template><main><el-selectref="select"v-model="values"multiplestyle="width:100%":placeholder="placeholder"@change="handleChang......
  • xml文件创建/写入
    创建xml文件publicvoidCreateXmlFile(stringLayoutFileXml,intid){XmlDocumentxmlDoc=newXmlDocument();//创建类型声明节点XmlNodenode=xmlDoc.CreateXmlDeclaration("1.0","utf-8","");xmlDo......