jquery-ui-multiselect 实现select下拉多选

原创 2015年11月19日 16:19:09
1.下载需要的插件:
jquery-ui; 下载网站:http://jqueryui.com/download/all/(本实例使用jquery-ui-1.11.0)
jquery-ui-multiselect; 下载网站:https://github.com/ehynds/jquery-ui-multiselect-widget
注意:
   jquery-ui-1.11.0只需要/images和jquery-ui.min.css,jquery-ui.min.js
   jquery-ui-multiselect只需要jquery.multiselect.css,jquery.multiselect.js,jquery.multiselect.zh-cn.js

 即可实现基本功能;

2.引入一系类js和css:

<span style="white-space:pre">	</span><script type="text/javascript" src="${ctx }/jsp/resource/js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="${ctx }/jsp/web/resource/jquery-ui-1.11.0/jquery-ui.min.js"></script>
	<link rel="stylesheet" type="text/css" href="${ctx }/jsp/web/resource/jquery-ui-1.11.0/jquery-ui.min.css"/>
	<script type="text/javascript" src="${ctx }/jsp/web/resource/jquery-ui-multiselect/jquery.multiselect.js"></script>
	<link rel="stylesheet" type="text/css" href="${ctx }/jsp/web/resource/jquery-ui-multiselect/jquery.multiselect.css"/>

3.代码块:

<span style="white-space:pre">	</span><style>
	.ui-multiselect{line-height:20px;height:25px;}//修改select显示框的高度
	</style>

javascript:

<span style="white-space:pre">	</span><script>
		$(function(){
		    $("select").multiselect({
		    	noneSelectedText: "--请选择--",
<span style="white-space:pre">		</span>    <span style="white-space:pre">	</span>header: false,//是否需要 头部的全选和全不选 
<span style="white-space:pre">		</span>      checkAllText: "全选",
<span style="white-space:pre">		</span>      uncheckAllText: '全不选',
<span style="white-space:pre">		</span>      selectedList:0,//选中后,在select中显示的选中text的个数,0代表不显示,只显示选中个数 
<span style="white-space:pre">		</span>      height: 100,//下拉选框的高度 
      <span style="white-space:pre">		</span>minWidth: 200  //整个select的最小宽度
		    });
		});
		//获取选中值
		function getData(){
			var selectsVa = $("select").multiselect("getChecked").map(function(){
               			return this.value;   
			}).get();
			for(var i=0;i<selectsVa.length;i++){
				alert(selectsVa[i]);
			}
		}
	</script>
html:

<span style="white-space:pre">	</span><select id ="sela" title="Basic example" multiple="multiple" name="example-basic" size="5">
		    <option value="V1">Option 1</option>
		    <option value="V2">Option 2</option>
		    <option value="V3">Option 3</option>
		    <option value="option4">Option 4</option>
		    <option value="option5">Option 5</option>
		    <option value="option6">Option 6</option>
		    <option value="option7">Option 7</option>
		    <option value="option8">Option 8</option>
		    <option value="option9">Option 9</option>
		    <option value="option10">Option 10</option>
		    <option value="option11">Option 11</option>
		    <option value="option12">Option 12</option>
	  </select>
	  <button onclick="getData()">getData</button>



版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

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

1、需要的下载的

jquery multiselect 下拉多选

http://www.cnblogs.com/xinchuang/archive/2013/05/24/3096757.html#commentform 这篇文章是我

jquery.multiSelect下拉多选

  • 2013-12-23 21:54
  • 25KB
  • 下载

jquery.multiSelect下拉多选

  • 2014-02-12 09:46
  • 25KB
  • 下载

插件介绍:Bootstrap 下拉多选框插件Bootstrap Multiselect

引入文件: <script type="text/javascript" src="js/bootstrap

jQuery实现input下拉多选框

jQuery实现input下拉多选框 支持单选,多选。
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)