使用 Select2 下拉框实现复选

Posted renxiuxing

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用 Select2 下拉框实现复选相关的知识,希望对你有一定的参考价值。

使用 Select2 下拉框实现复选

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery And Select2 Demo</title>
    <link href="./fSelect.css" rel="stylesheet" type="text/css">
</head>
<body style="">
    <select class="demo hidden" multiple="multiple" id="all">
        <option value="1">苹果</option>
        <option value="2">菠萝</option>
        <option value="3">蜜桃</option>
        <option value="4">香蕉</option>
        <option value="5">桃子</option>
        <option value="6">西瓜</option>
    </select>
    <input type="button" value="取值" 
    onclick="alert($('#all').val())" />
    <input type="button" value="赋值1" 
    onclick="$('.fs-label').text('苹果,菠萝');" />
    <!--//给select2赋值时为数组
    //可以将 1,2 转成数组
    //
    //var lb = msg.obj.gblb;
    //slb = lb.split(",");
    $("#all").val(slb).trigger("change");-->
    <input type="button" value="赋值2"
     onclick='$("#all").val(["1","2"]).trigger("change");' />
    <script type="text/javascript " src="../js/jquery-1.10.2.min.js " ></script>
    <script src="./fSelect.js "></script>
        <script>
            //初始化下拉框
            $(function() 
                $('.demo').fSelect();   
            );
        </script>

</body>
</html>
  • 效果图
    技术图片

以上是关于使用 Select2 下拉框实现复选的主要内容,如果未能解决你的问题,请参考以下文章

使用jquery select2实现下拉框搜索功能

jsp下拉框联动问题

select2的多选下拉框上传

下拉框的搜索(有图,适用下拉选择内容较多,需要搜索,自动联想)

select2 智能补全模糊查询select2的下拉选择框使用

Select2框下拉箭头UI问题