jquery multiselect插件实现下拉多选选框的效果

最新推荐文章于 2022-09-02 14:03:06 发布

爱晒太阳的小老鼠

最新推荐文章于 2022-09-02 14:03:06 发布

阅读量6.8k

点赞数 2

分类专栏： java 前端文章标签： jquery插件 checkbox select jquery multiselec

本文链接：https://blog.csdn.net/s07aser123/article/details/41308933

版权

java 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

最近在做一个项目，查询条件需要支持下拉框的多选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）效果图片