下拉多选插件

最新推荐文章于 2024-01-21 00:06:29 发布

Sweet_Waf

最新推荐文章于 2024-01-21 00:06:29 发布

阅读量314

点赞数 1

分类专栏： layui jquery 文章标签：下拉多选插件

本文链接：https://blog.csdn.net/Sweet_Waf/article/details/97396949

版权

layui 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

关于下拉多选插件

- - - select2的使用方法
    - formSelect的用法见下

目前我了解到的下拉多选的插件有两个，一个是select2,另一个是formSelect。
本文主要介绍如何使用这两个插件。

select2的使用方法

到github上选择一个版本下载到本地

github网址: https://github.com/select2/select2/tags;
select2网址：https://select2.org/

效果如图：
在这里插入图片描述
具体使用方法见代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="select2/css/select2.css">
</head>
<body>
<div>
    <select class="js-example-basic-multiple" name="citys" multiple="multiple">
        <option value="1">2</option>
        <option value="1">3</option>
        <option value="1">4</option>
        <option value="1">5</option>
    </select>
</div>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script src="select2/js/select2.full.js"></script>
<script>
    //select2
    $(document).ready(function () {
        $('.js-example-basic-multiple').select2({
            width: 100 + "%",
            allowClear: true,
            closeOnSelect: false
        });

    });
</script>
</html>

formSelect的用法见下

formSelect是基于layui推出的一款多选插件
先到Github上下载相关文件

github网址：https://github.com/hnzzmsf/layui-formSelects

效果如图：
在这里插入图片描述
具体方法见下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="formSelects-v4.css">
</head>
<body>
<div>
    <select name="city" xm-select="select1">
        <option value="1">2</option>
        <option value="1">3</option>
        <option value="1">4</option>
        <option value="1">5</option>
    </select>
</div>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script src="formSelects-v4.js"></script>
</html>