select2~给下拉选框增加搜索框插件

最新推荐文章于 2023-06-29 10:06:01 发布

xiaozhegaa

最新推荐文章于 2023-06-29 10:06:01 发布

阅读量1.2k

点赞数 1

分类专栏：前端集合

本文链接：https://blog.csdn.net/xiaozhegaa/article/details/104818597

版权

前端集合专栏收录该内容

5 篇文章 0 订阅

订阅专栏

功能作用

给下拉框增加搜索框，支持本地或远程的动态搜索，非常好用哦

功能展示

原始的搜索框

使用了Select2之后

官网推荐

http://select2.github.io/select2/

里面有超多超详细的案例哦

入门用例

官网已经有很详细的案例，建议看官网。

1、引入jq、select.css和select.js

<link rel="stylesheet" href="../../../lib/layui/css/layui.css" media="all"/>
<script src="https://cdn.staticfile.org/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="../../../lib/layui/select2.min.js"></script>

2、写一个最简单的html页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>服装类型添加</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../../lib/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="../../../lib/layui/css/select2.min.css" media="all"/>
    <style type="text/css">
        .layui-form-item .layui-inline {
            width: 33.333%;
            float: left;
            margin-right: 0;
        }

        @media (max-width: 1240px) {
            .layui-form-item .layui-inline {
                width: 100%;
                float: none;
            }
        }
    </style>
</head>
<body class="childrenBody">
<form class="layui-form" style="width:80%;">
    <input type="hidden" class="layui-input" lay-verify="required" name="originalFileName" placeholder="请输入充值金额">
    <input type="hidden" class="layui-input" lay-verify="required" name="fileUrl" placeholder="请输入充值金额">

    <select id="xiaozheng" style="width: 180px;margin-bottom: 100px;margin-left: 100px;">
        <option value ="volvo">Volvo</option>
        <option value ="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
    </select>

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

</form>
<script src="https://cdn.staticfile.org/jquery/3.1.1/jquery.min.js"></script>
<!--一般情况下，一个业务页面引入一个layui.js,config.js和业务js这三个js就够了-->
<script type="text/javascript" src="../../../lib/layui/layui.js"></script>
<script type="text/javascript" src="../../../common/js/config.js"></script>
<script type="text/javascript" src="../../../lib/layui/select2.min.js"></script>
<script type="text/javascript" src="newPage.js"></script>
<script>
    $(document).ready(function() {
        $("#xiaozheng").select2();
    });
</script>
</body>
</html>

3、调用选择框初始化方法

 $(document).ready(function() {
        $("#xiaozheng").select2();
    });

就可以。

学习推荐~看官网，官网提供了数十个案例，非常详细

下一篇分享个人使用select2()常用的一些操

xiaozhegaa

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
select2~给下拉选框增加搜索框插件

功能作用给下拉框增加搜索框，支持本地或远程的动态搜索，非常好用哦功能展示原始的搜索框使用了Select2之后官网推荐http://select2.github.io/select2/里面有超多超详细的案例哦入门用例官网已经有很详细的案例，建议看官网。1、引入jq、select.css和select.js<link rel="stylesh...
复制链接

扫一扫

专栏目录