前端框架layui 表单控件select多选multiSelect.js 使用

Spade_King · 2022-9-30 16:34:35

multiSelect.js  分享下载地址
链接:https://pan.baidu.com/s/1MBLSo_JWXNzpf1YSMXNNzQ 提取码:nn43

代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../layui/css/layui.css"/>
<style>body{padding:20px;}.multi dl dd.layui-this{background-color:#fff}</style>
</head>
<body>
<form class="layui-form layui-form-pane" action="" style="width: 500px">
<div class="layui-form-item">
      <label class="layui-form-label">多选</label>
      <div class="layui-input-block">
         <select multiple="multiple" lay-filter="test" id="sblb" name="sblb"  lay-search></select>
      </div>
</div>
<div class="layui-form-item">
      <label class="layui-form-label">单选</label>
      <div class="layui-input-block">
         <select>
            <option value=""></option>
            <option value="0">写作</option>
            <option value="1" selected>阅读</option>
            <option value="2">游戏</option>
            <option value="3" selected>音乐</option>
            <option value="4">旅行</option>
         </select>
      </div>
</div>

<button type="button" class="layui-btn layui-btn-normal" id="get-val">获取选中值</button>
</form>
<script type="text/javascript" src="../layui/layui.js"></script>
<script src="../js/jquery-3.5.1.js"></script>
<script type="text/javascript">

$(function () {
      var layer;
      var form;
      var table;
      var laydate;
      var multiSelect;

      layui.config({
         base: '../layui/',
      }).use('multiSelect',function () {
         layer = layui.layer
                  , form = layui.form
                  , table = layui.table
                  , laydate = layui.laydate
                  , multiSelect = layui.multiSelect

         $('#sblb').html("<option value=\"\"></option><option value=\"205\" >通信设备</option><option value=\"32206\" >中医仪器设备</option><option value=\"32217\" >其他</option><option value=\"10202\" >业务及管理用房</option><option value=\"10203\" >砖混结构</option><option value=\"10205\" >简易房</option><option value=\"10206\" >房屋附属设施</option><option value=\"103\" >构筑物</option><option value=\"201\" >计算机设备</option><option value=\"202\" >办公设备</option><option value=\"203\" >车辆</option><option value=\"210\" >机械设备</option><option value=\"220\" >电气设备</option><option value=\"232\" >广播、电视、电影设备</option><option value=\"241\" >电子和通信测量仪器</option><option value=\"32201\" >医用电子仪器</option><option value=\"32202\" >医用超声仪器</option><option value=\"32203\" >医用高频仪器设备</option><option value=\"32204\" >物理治疗及体疗设备</option><option value=\"32205\" >高压氧舱</option><option value=\"32207\" >医用磁共振设备</option><option value=\"32208\" >医用X线设备</option><option value=\"32209\" >高能射线设备</option><option value=\"32211\" >临床检验分析仪器</option><option value=\"32212\" >体外循环设备</option><option value=\"32213\" >手术急救设备</option><option value=\"32214\" >口腔设备</option><option value=\"32215\" >病房护理设备</option><option value=\"32216\" >消毒设备</option><option value=\"32218\" >光学仪器及窥镜</option><option value=\"32219\" >激光仪器设备</option><option value=\"601\" >家具</option><option value=\"602\" >用具、装具</option><option value=\"710\" >计算机软件</option><option value=\"715\" >土地</option><option value=\"3\" >房屋</option><option value=\"4\" >构筑物</option><option value=\"5\" >通用设备</option><option value=\"6\" >车辆</option><option value=\"7\" >专用设备</option><option value=\"12\" >无形资产</option><option value=\"10\" >家具、用具、装具</option>");
         multiSelect.render("select");
         form.render("select");

         $('#get-val').click(function () {
            var vals = [],
                     texts = [];
            $('select[multiple] option:selected').each(function () {
                  vals.push($(this).val());
                  texts.push($(this).text());
            })
            console.dir(vals);
            console.dir(texts);
         })
         form.on('select(test)', function (data) {
            console.dir(data);
         })
      });
});

</script>
</body>
</html>

前端框架layui 表单控件select多选multiSelect.js 使用

新人须知

常见问题

关于我们