MVC+Layui 多选下拉框xmSelect

这篇具有很好参考价值的文章主要介绍了MVC+Layui 多选下拉框xmSelect。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

MVC+Layui 多选下拉框xmSelect,C#,Layui,layui,前端,javascript,c#

1、选择layui拓展第三方组件找到xmselect

xmSelect下拉多选 xmSelect - Layui 第三方扩展组件平台 (layuion.com)

下载后放到项目文件中

2、项目引用js文件

 <script src="~/Content/dist/xm-select.js"></script>

3、html添加表单设置id

  <div class="layui-form-item">
        <label class="layui-form-label">物料类型:</label>
        <div id="seltype" style="width:280px;margin-left:80px;"></div>
    </div>

 4、js添加数据

1、基本样式

 var options = {
        el: '#seltype',
        //name: 'xmselectName',//表单的name属性
        layVerify: 'required',//必填项
        //layVerType: 'tips',//提示类型 同layui
        toolbar: {//工具条,全选,清空,反选,自定义
            show: true,
            list: [
                'ALL',
                'CLEAR',
                'REVERSE'
            ]
        },
        data: [],//存放数据
        filterable: true,//搜索功能
        autoRow: true,//选项过多,自动换行
        //initValue: ['shuiguo','shucai'],//默认初始化,也可以数据中selected属性
        //language: 'zn',//语言包
        // repeat: true,//是否支持重复选择
        //max: 2,//最多选择2个
        // template({ item, sels, name, value }){
        //    //template:自定义下拉框的模板
        //     return item.name  + '<span style="position: absolute; right: 10px; color: #8799a3">'+value+'</span>'
        // },
    };

2、关联组件

var seltype = xmSelect.render(options);

3、ajax追加数据

 var getmateriallist = function () {
        $.ajax({
            url: 'XXX',
            type: "Get",
            success: function (res) {
                if (res.length > 0) {//注:仅支持name value
                    seltype.update({ data: res })
                }
            }
        })
    }

5、读取多选下拉框的值

var list=seltype.getValue();文章来源地址https://www.toymoban.com/news/detail-819589.html

到了这里,关于MVC+Layui 多选下拉框xmSelect的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • layui table列表下拉选操作

        列表中增加下拉选    有的人说样式需要调整,加一个下边这个,不然下拉选打开会显示不出来,我的没有这种情况,大家根据情况使用  数据获取和调用后台接口  原文地址:layui学习——数据表格嵌套下拉列表,并实现动态更新 - 夏末蝉未鸣 - 博客园 我文章里是我的

    2024年02月11日
    浏览(35)
  • layui实现地址下拉框模糊查询

    注意:千万不要少 lay-search 控制器中 service层

    2024年01月18日
    浏览(36)
  • MVC+Layui弹出表单模态框

    1、Html页面添加隐藏的form表单 button class=\\\"layui-btn\\\" id=\\\"add\\\" lay-on=\\\"add\\\"添 加/button添加按钮  form class=\\\"layui-form\\\" id=\\\"AddForm\\\" method=\\\"post\\\" lay-filter=\\\"example\\\" style=\\\"width:360px;display:none;margin:auto;margin-top:20px\\\"     div class=\\\"layui-form-item\\\"         label class=\\\"layui-form-label\\\"规格型号:/label         in

    2024年02月03日
    浏览(38)
  • layui下select下拉框不显示或没有效果

    弹层layer选择框没有样式_不可点击_渲染失效的解决办法 一、必须给表单体系所在的父元素加上 class=\\\" layui-form \\\" 在一个容器中设定 class=\\\"layui-form\\\"  来标识一个表单元素块,如果你不想用 form,你可以换成  div  等任何一个普通元素( 推荐用 form );记得要在 外层容器 中定

    2024年02月09日
    浏览(43)
  • C# MVC +Layui侧边导航栏的收缩及展开

    目录 1、头部代码 2、侧边栏(例子只写了一级导航,需要多级可自行添加)  3、body内容填充 4、 JS 1、头部代码 div class=\\\"layui-layout layui-layout-admin\\\"         div class=\\\"layui-header\\\"             div class=\\\"layui-main\\\"                 div class=\\\"layui-logo\\\" style=\\\"width:100px\\\"//logo            

    2024年02月03日
    浏览(39)
  • Layui的第三方组件xm-select下拉控件默认值

    下面这种是xm-select里面data有值时动态取默认值 如果在你编写代码的时候使用的是远程查询 remoteMethod 来进行时

    2024年02月15日
    浏览(42)
  • 前端框架Layui的使用讲解(Layui搭建登录注册页面)

    目录 一、前言 1.什么是Layui 2.Layui的背景 3.为什么要使用Layui 4.Layui的模块化 二、Layui使用讲解 1.初识Layui 2.搭建登录页面 静态效果图​ 封装引入文件页面(公用页面) jsp页面搭建 userDao编写 Servlet页面编写 xml文件配置 3.搭建注册页面 静态效果图 jsp页面搭建 Servlet页面编写 最

    2024年02月15日
    浏览(41)
  • 【前端】layui前端框架学习笔记

    【前端目录贴】 参考视频 :LayUI 参考笔记 :https://blog.csdn.net/qq_61313896/category_12432291.html 官网:http://layui.apixx.net/index.html 国人16年开发的框架,拿来即用,门槛低 … Layui 是一套开源的 Web UI 组件库,采用自身轻量级模块化规范,遵循原生态的 HTML/CSS/JavaScript 开发模式,极易上手,

    2024年04月23日
    浏览(48)
  • 前端框架LayUI

    Bootstrap让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适 用。 可以直接使用Bootstrap提供的 CSS 样式表,Bootstrap的源码是采用最流行的CSS预处理工具Less和Sass开发的。可以直接采用预编译的CSS文件快速开发,也可以从Bootstrap源码自定义自

    2024年02月02日
    浏览(55)
  • 【前端】Layui动态数据表格拖动排序

    目的:使用Layui的数据表格,拖动行进行排序。 使用插件:layui-soul-table 和 Layui 1.layui-soul-table文档:https://soultable.yelog.org/#/zh-CN/component/start/install 2.layui文档:Layui table模块 | 数据表格 | datatable - 在线演示 结合Layui并参看layui-soul-table官方教程,写的比较详细页比较简单。 实现

    2024年02月10日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包