工作中遇到的下拉多选框
引入用到的库
<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 οnclick="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, sans-serif; font-size: 12px; } H2 { font-size: 14px; font-weight: bold; margin: 1em 0em .25em 0em; } P { margin: 1em 0em; } </style>