jquery多选上拉菜单
jquery多选下拉菜单
jquery多选下拉菜单
作者:zccst
一、原理
官方网址:http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
下拉菜单可以多选
二、安装与配置
1,到官方网站下载
需要的相关插件
(1) jquery //依赖
(2) jquery-ui //依赖
(3) jquery.multiselect
注:附件中已经有jquery.multiselect
2,在需要的页面引入js和css即可
3,配置项
三、实例
注:jquery-ui不只是两个文件,还有images。
四、获取其值
尽管是下拉菜单,本质是checkbox,所以取值按checkbox。
jquery多选下拉菜单
作者:zccst
一、原理
官方网址:http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
下拉菜单可以多选
二、安装与配置
1,到官方网站下载
需要的相关插件
(1) jquery //依赖
(2) jquery-ui //依赖
(3) jquery.multiselect
注:附件中已经有jquery.multiselect
2,在需要的页面引入js和css即可
3,配置项
//一个实例 $(document).ready( function() { $("#roleIds").multiSelect({ minWidth:255, checkAllText:'全选', uncheckAllText:'全不选', selectedText: "当前有 # 个被选中,共 # 个", selectedList: 6, show:["slide",500], hide:["explode",1000] }); }); //jquery ui 的动画效果有 //'blind', 'bounce', 'clip', 'drop', 'explode', 'fold', 'highlight', 'puff', 'pulsate', 'scale', 'shake', 'size', 'slide', 'transfer'.
三、实例
<script type="text/javascript" src="../../../jquery/jquery-1.7.1.js"></script> <script type="text/javascript" src="jquery-ui.min.js"></script> <script type="text/javascript" src="jquery.multiselect.js"></script> <link type="text/css" href="jquery.multiselect.css" rel="stylesheet" /> <link type="text/css" href="jquery-ui.css" rel="stylesheet" /> <script type="text/javascript"> $(document).ready(function(){ //$("#example").multiselect(); $("select").multiselect({ 'header':false }); }); </script> <select id="example" name="example" multiple="multiple"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option> </select>
注:jquery-ui不只是两个文件,还有images。
四、获取其值
尽管是下拉菜单,本质是checkbox,所以取值按checkbox。
var idcs = ""; $("input[name='multiselect_outsource_idcs']:checkbox:checked").each(function(){ idcs += $(this).val()+";"; }); //注:特点是在原来name的基础上,前面多加了个multiselect_。