select2 支持多值下拉框

最新推荐文章于 2024-06-11 16:39:30 发布

daydayupzzc

最新推荐文章于 2024-06-11 16:39:30 发布

阅读量1.7w

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/daydayupzzc/article/details/52848918

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

select2是一个非常好用的下拉框插件，支持很多功能。

官方文档，例子：http://select2.github.io/

现在记录一下我在工作中用到的下拉框多值选择。界面如下：

html定义：

首先引入css,js库

<link href="#springUrl("")/plugins/select2/select2.min.css" rel="stylesheet" type="text/css" />
<script src="#springUrl("")/plugins/select2/select2.min.js"></script>

在html中定义如下下拉框：

<select id="cluster" class="select2" multiple="multiple">
  <option value="1">jiesi-1</option>
    ...
  <option value="5">jiesi-8</option>
</select>

//注意，上面加上multiple="multiple"就可以让select支持多选，不加就是单选

//例子：http://select2.github.io/examples.html

初始化：

在js中加载的时候初始化select.

$("#cluster").select2();

如果需要，可以加一些事件函数：

$("#cluster").select2().on("select2:select",function(e){
    getClusterNodes($(this).val(),null);
});

使用：

设置select选中某个值：

$("#cluster").val(3);//设置选中值
$("#cluster").trigger("change");//触发change事件，让界面上显示选中的值

设置select多值选中：

$("#cluster").val([2,3]).trigger("change");//设置多个值选中

设置select选中某个值，并且触发选中事件

$("#clusterSelect").val(selectedCluster.id).trigger("change").trigger("select2:select");

//获取select选中的值：

alert($("#cluster").val());//3,4,5 //输出选择的value，如果有多个值之间逗号分隔
var selected = $("#cluster").select2('data');//选择的值
for (var i=0;i<selected.length;i++) {
    alert(selected[i].id + '->' + selected[i].text);//输出 2->jiesi-1
}

例子：multiSelectTest.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>select 测试</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
</head>
<body>

<div>
    <h1>单选测试</h1>
    <select id="single_select" style="width: 400px;">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="cc">cc</option>
        <option value="dd">dd</option>
    </select>
    <button type="button" onClick="search1();">查询</button>
</div>

<div>
    <h1>多选测试</h1>
    <select id="multi_select" style="width: 400px;" multiple="multiple">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="cc">cc</option>
        <option value="dd">dd</option>
    </select>
    <button type="button" onClick="search2();">查询</button>
</div>

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

</body>

<script type="text/javascript">

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

    function search1() {
        alert($("#single_select").val());
    }

    function search2() {
        alert($("#multi_select").val());
    }

</script>

</html>

daydayupzzc

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
select2 支持多值下拉框

select2是一个非常好用的下拉框插件，支持很多功能。官方文档，例子：http://select2.github.io/现在记录一下我在工作中用到的下拉框多值选择。html定义：首先引入css,js库在html中定义如下下拉框： Alabama ... Wyoming//注意，上面加上multiple="
复制链接

扫一扫