最近在做一个项目,查询条件需要支持下拉框的多选checkbox的那种效果,查了一些网上的资料,找到了jquery-ui-multiselect可以实现功能,下面就是用这种插件做的一个小例子。
1、需要的下载的插件
(1)下载jquery-ui-multiselect
下载官网 http://www.erichynds.com/blog/jquery-ui-multiselect-widget
(2)下载jquery.js
2、使用demo
(1)示例代码
<pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>juery实现下拉checkbox效果</title>
<link rel="stylesheet" type="text/css" href="jquery-ui-multiselect/css/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="jquery-ui-multiselect/css/jquery.multiselect.filter.css" />
<link rel="stylesheet" type="text/css" href="jquery-ui-multiselect/css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="jquery-ui-multiselect/assets/style.css" />
<link rel="stylesheet" type="text/css" href="jquery-ui-multiselect/assets/prettify.css" />
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery-ui-multiselect/assets/prettify.js"></script>
<script type="text/javascript" src="jquery-ui-multiselect/src/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery-ui-multiselect/src/jquery.multiselect.js"></script>
<script type="text/javascript" src="jquery-ui-multiselect/src/jquery.multiselect.filter.js"></script>
<script type="text/javascript">
$(function(){
$("select").multiselect({
noneSelectedText: "==请选择==",
checkAllText: "全选",
uncheckAllText: '全不选',
selectedList:4
});
});
function showValues() {
var array_of_checked_values = $("#sela").multiselect("getChecked").map(function(){
return this.value;
}).get();
alert(array_of_checked_values);
}
</script>
</head>
<body>
<h2>demo</h2>
<p>jquery插件实现下拉多选框选择功能</p>
<pre class="prettyprint">
$(function(){
$("select").multiselect();
});
</pre>
<button οnclick="showValues()">显示选取的城市</button>
<h3>选择城市</h3>
<p>
<select id ="sela" title="Basic example" multiple="multiple" name="example-basic" size="5">
<option value="1">上海</option>
<option value="2">武汉</option>
<option value="3">成都</option>
<option value="4">北京</option>
<option value="5">南京</option>
</select>
</p>
</body>
</html>
(2)效果图片