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>