多选下拉框实现 博客分类： web

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>