Jquery实现下拉多选框multiSelect

工作中遇到的下拉多选框

引入用到的库

<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>