使用 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 下拉框实现复选的主要内容,如果未能解决你的问题,请参考以下文章
下拉框的搜索(有图,适用下拉选择内容较多,需要搜索,自动联想)