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>



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

Hadoop基础教程-第4章 HDFS的Java API(4.1 Maven入门)

第4章 Eclipse+Hadoop4.1 Maven入门参考文章:https://my.oschina.net/huangyong/blog/1945834.1.1 Maven简介Apache Ma...

Yarn作业信息的获取

方式1–查看作业记录文件CDH中,在HDFS的/user/history/done目录下,包含了全部已完成的MR作业,done_intermediate包含了全部正在进行的作业。方式2–REST AP...

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

1、需要的下载的

jquery.multiSelect下拉多选

  • 2013年12月23日 21:54
  • 25KB
  • 下载

jquery multiselect 下拉多选

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

Bootstrap-select下拉多选获取选中的数据

刚好用到bootstrap-select插件,遇到问题: 1.如何把选中的人员[名字+id]获取到? 2.后台要求的是json格式的数据,如何处理? 3.前端用el表达式在jsp中绑定了,把id...

jquery下拉多选框multiSelect

  • 2016年04月21日 19:50
  • 91KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery-ui-multiselect 实现select下拉多选
举报原因:
原因补充:

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