select2 下拉框实现多选功能

最新推荐文章于 2024-07-30 11:44:31 发布

qiweilong123456

最新推荐文章于 2024-07-30 11:44:31 发布

阅读量4.4k

点赞数 3

分类专栏：前端文章标签： jquery js html

本文链接：https://blog.csdn.net/qq_33745371/article/details/114071261

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

文章目录

效果

1）直接选择

在这里插入图片描述

2）输入内容检索

在这里插入图片描述

点击"输出选中"，显示结果

在这里插入图片描述

代码

1.要导入jquery.js以及select2的css和js

我在项目代码里有放，直接下载即可。
百度网盘：
链接：https://pan.baidu.com/s/1gN08az4lIsYviL13o5Fk-w
提取码：xolz

2.html代码—index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多选案例</title>
    <!-- 注意顺序，先jquery,再select2 -->
    <!-- Jquery -->
    <script src="../js/jquery.js"></script>
    <!-- Select2 -->
    <link rel="stylesheet" href="../plugins/select2/css/select2.min.css">
    <!-- Select2 -->
    <script src="../plugins/select2/js/select2.full.min.js"></script>
    <!-- index -->
    <script src="../js/index.js"></script>
</head>
<body>
    <div>
        <label style="width: 100px;line-height: 2.5;text-align: right;">明星</label>
        <select id="movieStar" name="movieStar" class="select2"  multiple="multiple" style="width: 150px">
            <option value="成龙">成龙</option>
            <option value="吴彦祖">吴彦祖</option>
            <option value="彭于晏">彭于晏</option>
            <option value="宋威龙">宋威龙</option>
        </select>
        <button onclick="alertMovieStar()">输出选中</button>
    </div>
</body>
</html>

3.js—index.js

// 自执行函数
$(function(){
    $('.select2').select2();//初始化插件
});
//输出选中的明星
function alertMovieStar(){
    var movieStar = $("#movieStar").val();//数组形式
    for(var detail of movieStar){
        console.log(detail);
    }
    if(movieStar=="" || movieStar==null){
        alert("尚未选择");
    }else{
        alert(movieStar);
    }

}