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>