Jquery实现下拉多选框multiSelect
2016-04-21 19:42
393 查看
工作中遇到的下拉多选框
引入用到的库
html部分
js部分
css部分
引入用到的库
<script src="js/jquery-1.8.3.js" type="text/javascript"></script> <script src="js/jquery.bgiframe.min.js" type="text/javascript"></script> <script src="js/jquery.multiSelect.js" type="text/javascript"></script> <script src="js/jquery.sumoselect.min.js" type="text/javascript"></script> <link href="js/jquery.multiSelect.css" rel="stylesheet" type="text/css"/>
html部分
<span style="font-family: Arial, Helvetica, sans-serif;"><span id="sele"></span></span>
<button onclick="findSelected()">查看选中项目</button>
js部分
$(document).ready(function () { var data = [{name: "类型1", type: "1"}, {name: "类型2", type: "2"}, {name: "类型3", type: "3"}, {name: "类型4", type: "4"}, {name: "类型5", type: "5"}, {name: "类型6", type: "6"}, {name: "类型7", type: "7"}, {name: "类型8", type: "8"}, {name: "类型9", type: "9"}, {name: "类型0", type: "0"} ]; var temp = "<select id='control_3' name='control_3[]' multiple='multiple' style='width: 300px;height: 500px;'>"; $.each(data, function (i, n) { console.info(n) temp += "<option value='"+n.type+"'>" + n.name + "</option>"; }); temp += "</select>"; $("#sele").html(temp); $(" #control_3").multiSelect({ selectAll:false,//是否有全选功能 selectAllText:"全选",//全选项显示的文字 noneSelected:"---请选择---",//没有选项时显示的内容 // oneOrMoreSelected://有一个或多个选中后下拉文本框内显示的内容 // optGroupSelectable: // listHeight }); }); //获取选中项目的value function findSelected(){ console.info($("#control_3").selectedValuesString()); }
});
css部分
<style type="text/css"> HTML { font-family: Arial, Helvetica, san a971 s-serif; font-size: 12px; } H2 { font-size: 14px; font-weight: bold; margin: 1em 0em .25em 0em; } P { margin: 1em 0em; } </style>
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- JavaScript 各种遍历方式详解
- 数组方法汇总
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码