您的位置:首页 > Web前端 > JQuery

Jquery实现下拉多选框multiSelect

2016-04-21 19:42 393 查看
工作中遇到的下拉多选框

引入用到的库

<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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jquery multiSelect