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>
相关推荐
更多说明移步:https://blog.csdn.net/ZYS10000/article/details/120118373
多个js实现的多选下拉框
使用bootstrap实现多选下拉框
JS多选下拉框,实现多选。点击显示下拉。 <!-- function $(e){return document.getElementById(e) ;} $('btnSelect').onclick = function () { //§ó§ï?? $('status').innerHTML = $('status').innerHTML=...
jquery实现的多选下拉框ehynds-jquery-ui-multiselect-widget-1.10-3.zip
java swing 多选下拉框 支持动态加载数据 (优化了网上的下拉框代码)
asp.net Dropdownlist结合CheckBoxList多选下拉框
自定义的WinForm窗体的下拉框中可以多选
html多选下拉框 ,CheckBox的Select组件。可多选的下拉框。
jq+css实现的select多选下拉框美化
jquery实现可多选下拉框 代码很简单,有基础的人一看即会,
QComboBox多选下拉框,可点击删除
html下拉多选框样式,h5下拉多选框整套样式,用layui实现下拉框select多选,取值 layui 多选下拉框 控件 整套样式
bootstrap的多选下拉框控件,通过对多选框的渲染,在下拉框中实现多选
自己写的一个简单的多选下拉框,功能完善,且移植性很好
自定义多选下拉框标签,只需引用标签即可实现多选下拉框,可以传入参数来改变样式等
无聊时自己随便写写的一个可以多选的下拉框,基于jquery1.6版本,下拉选项可以多选。有需要的可以下载看来看看。在ie8、火狐、谷歌、360极速上运行有效。其它浏览器未知=。=
实现多选的下拉框的自定义控件,能够自己修改样式等信息,简单通过DataTable就能绑定数据,非常简单易用的自定义控件
由于项目需要,自己设计的,大家可以看看,由于时间仓促,还不是十分完美,望多多包涵。
使用jquery实现的风格的多选下拉框demo,直接打开index.html就可以使用。适合集成到后台系统的多选下拉框业务场景