jQuery多选列表框插件Multiselect
效果如下图:
在官⽹下载所需的js,css等相关⽂件
然后引⼊以下⽂件:
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.multiselect2side.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.multiselect2side.css"/>
Html:
<select id='liOption' multiple='multiple' size='8' >
<option value="PHP">PHP</option>
jquery插件有哪些种类<option value="MYSQL">MYSQL</option>
<option value="ASP.NET">ASP.NET</option>
<option value="XHTML">XHTML</option>
<option value="CSS">CSS</option>
<option value="JQUERY">JQUERY</option>
</select>
如果默认已经有选择的项,则看将option的属性selected设置为"selected"。
最后应⽤multiselect插件:
$(function(){
$("#liOption").multiselect2side({
selectedPosition: 'right',
moveOptions: false,
labelsx: '待选区',
labeldx: '已选区'
});
});
multiselect提供了⼀些属性的设置,selectedPosition:选择项的位置,默认为right,即最终获取选择的值是右边的列表框。moveOptions:移动选项,可以⽤来给选项排序,实际应⽤意义不⼤,这⾥设置为false。
labelsx和labeldx是⽤来设置左右两个列表框的标题,如果不需要可设置为空。
maxSelected:最⼤选项数,即最多只能选择⼏项。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论