layui实现select下拉选择框组件（含代码、案例、截图）

最新推荐文章于 2024-05-24 18:20:04 发布

草巾冒小子

最新推荐文章于 2024-05-24 18:20:04 发布

阅读量4.5k

点赞数 2

分类专栏： Layui 踩坑篇

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/118305487

版权

Layui 踩坑篇专栏收录该内容

19 篇文章 3 订阅

订阅专栏

layui实现select下拉选择框组件（含代码、案例、截图）

案例 · 效果图：

在这里插入图片描述

全部代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>select下拉框组件</title>
  <link rel="stylesheet" href="statics/plugin/layui/css/layui.css">
  <link rel="stylesheet" href="statics/css/common.css">
  <link rel="stylesheet" href="statics/css/member.css">
</head>
<body>
<!-- 让IE8/9兼容栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<div class="layui-container mgt20">
  <form class="layui-form" action="">
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">分组选择框</label>
        <div class="layui-input-inline">
          <select name="type" lay-verify="required">
            <option value="">请选择分类</option>
            <optgroup label="我是服务者">
              <option value="大集团企业">大集团企业</option>
              <option value="小公司">小公司</option>
              <option value="个体工商户">个体工商户</option>
            </optgroup>
            <optgroup label="我是消费者">
              <option value="中老年">中老年</option>
              <option value="中青年">中青年</option>
              <option value="青少年">小学生</option>
              <option value="小学生">小学生</option>
              <option value="婴幼儿">婴幼儿</option>
            </optgroup>
          </select>
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">搜索选择框</label>
        <div class="layui-input-inline">
          <select name="condition" lay-verify="required" lay-search="">
            <option value="">直接选择或搜索选择</option>
            <option value="1">layer</option>
            <option value="2">form</option>
            <option value="3">layim</option>
            <option value="4">element</option>
          </select>
        </div>
      </div>
    </div>


    <div class="layui-form-item">
      <div class="layui-input-block">
        <button type="submit" class="layui-btn" lay-submit="" lay-filter="smbtn">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  
  










  </form>

</div>



 
<script src="statics/plugin/layui/layui.js"></script>
<script>
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
});


layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;

  //监听提交
  form.on('submit(smbtn)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    return false;
  });


});
</script> 
</body>
</html>

以上就是关于“ layui实现select下拉选择框组件（含代码、案例、截图） ”的全部内容。

草巾冒小子

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
layui实现select下拉选择框组件（含代码、案例、截图）

layui实现select下拉选择框组件（含代码、案例、截图）案例 · 效果图：全部代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>select下拉框组件<
复制链接

扫一扫