多选下拉框实现

html中有自带的多选下拉框，只要设置select的multiple="multiple"

如下：

<select  multiple="multiple"></select>

 但是其效果难以接受，而且选择操作不方便，于是简单实现了一个多选下拉框，效果如下：

 

 

引入js、css 见附件multiple.zip(jquery 1.4以上，之前版本没测过)

multiple-select.css

jquery.js
multiple-select.js

 

html代码如下注意 targetObjectId  targetObjectName  值对应的input

<div>
	<input type="hidden" id="s_zoneStatId"    />
	<input type="text" id="s_zoneStatName"   />
	<div class="multipeSelect"   
style="display: none; position: absolute;" 
targetObjectId = "s_zoneStatId" 
targetObjectName = "s_zoneStatName" >
	           <ul>
		                               <li>
		                               		<input value="1" type="checkbox">
		                               		<span>待评测</span>
		                               </li>
		                            
		                               <li>
		                               		<input value="2" type="checkbox">
		                               		<span>评测中</span>
		                               </li>
		                            
		                               <li>
		                               		<input value="3" type="checkbox">
		                               		<span>已评测</span>
		                               </li>
		                            
		                               <li>
		                               		<input value="4" type="checkbox">
		                               		<span>已定级</span>
		                               </li>
		                            
	                       		
	           </ul>
	           <a href="javascript:void(0)"  class="click">清空</a>
	           <a href="javascript:void(0)"  class="click">反选</a>
	  </div>
</div>

 

 

页面插入如下js代码

<script type="text/javascript">
 $(document).ready(function(){
        new MultipeSelect();
    });
</seript>

 

 

 

评论

8 楼 qazw_ 2017-11-08  

不能用

7 楼 zgwyfz8 2017-07-22  

这个控件也不错，可以试试，在使用中如果有不懂的可以在下拉控件群里直接问作者
http://blog.csdn.net/zgwyfz/article/details/75653023

6 楼 陌_刺心 2016-07-29  

5 楼 zgwyfz8 2016-05-05  

这个很好用，只需引入一个js文件！，简单方便，因为是纯js实现，所以不存在jQuery版本问题
http://wenku.baidu.com/link?url=WanyakORuw6r5ND0yNDPh24D7FYBp3_01z5iI1Qg4KIEWfRkT6YTR5qx8Xy_cZqjfTA2ejzdCcq88H40HUpxCAseHifU_aTFoDzqYEXGVdC

4 楼 zgwyfz8 2016-05-05  

http://wenku.baidu.com/link?url=WanyakORuw6r5ND0yNDPh24D7FYBp3_01z5iI1Qg4KIEWfRkT6YTR5qx8Xy_cZqjfTA2ejzdCcq88H40HUpxCAseHifU_aTFoDzqYEXGVdC

3 楼 xian592016115 2016-04-21  

好用，谢谢博主

2 楼 xuyide_1102 2016-03-21  

1 楼 liangm 2015-08-20  

附件无法下载啊！！！！