multiselect实现下拉框条件检索、支持多选、单选

女爷i 2022-05-19 03:20 312阅读 0赞

<!DOCTYPE html>  
<html>  
    <head>  
        <title>Bootstrap Multiselect</title>  
        <meta name="robots" content="noindex, nofollow" />  
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

/\* 实现宽度自定义 \*/  
    .myOwnDdl .btn-group\{  
        width:100%;  
    \}  
    .myOwnDdl .multiselect \{  
        width:100%;  
        text-align:right;  
        margin-top:-5px;  
    \}  
    .myOwnDdl ul \{  
        width:100%;  
    \}  
    .myOwnDdl .multiselect-selected-text \{  
        position:absolute;  
        left:0;  
        right:25px;  
        text-align:left;  
        padding-left:20px;  
    \}

/\*控制隔行换色\*/  
    .myOwnDll .multiselect-container li.odd \{  
        background: \#eeeeee;  
    \}  
    /\*//控制select文本内容位置\*/  
    .btn-group>.btn:first-child \{  
        margin-left: 0;  
        padding-right: 90%;  
    \}  
    /\* select -mul end \*/  
</style>  
        <script type="text/javascript">  
            $(document).ready(function() \{  
                window.prettyPrint() && prettyPrint();  
                $("\#moreSelect").multiselect(\{  //分别为控制下拉容器最大高度、最多允许具体展示选中项数（其余以数字形式展示）、隔行换色控制、全选、支持检索。  
                maxHeight:300,  
                numberDisplayed:3,  
                optionClass: function(element) \{  
                    var value = $(element).parent().find($(element)).index();  
                    if (value%2 == 0) \{  
                        return 'even';  
                    \}  
                    else \{  
                        return 'odd';  
                    \}  
                \},  
                includeSelectAllOption: true,  
                enableFiltering: true,  
                selectAllJustVisible: true,  
                nonSelectedText: '请选项目', //默认展示文本  
                selectAllText: '全选'  //全选文本  
            \});  
              
            $('\#radioSelect').multiselect(\{  
                       enableFiltering: true,  
                 \});  
            \});  
        </script>  
    </head>  
<body>  
                           
                        <div class="form-group" >  
                            <label class="col-sm-4 control-label"><i class="required">\*&nbsp;</i>项目多选：</label>  
                            <div class="col-sm-6">  
                                <div  class="myOwnDdl">  
                                    <select  name="expendProject" id="moreSelect" class="form-control" multiple="multiple">  
                                            <option value="1">AAAAAAAA1</option>  
                                            <option value="2">BBBBBBBB2</option>  
                                            <option value="3">CCCCCCCC1</option>  
                                            <option value="4">DDDDDDDD2</option>  
                                            <option value="5">EEEEEEEE3</option>  
                                            <option value="6">FFFFFFFF4</option>  
                                            <option value="7">GGGGGGGG3</option>  
                                            <option value="8">HHHHHHHH5</option>  
                                            <option value="9">TTTTTTTT4</option>  
                                    </select>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="form-group" style="padding-top:110px">  
                            <label class="col-sm-4 control-label"><i class="required">\*&nbsp;</i>项目单选：</label>  
                            <div class="col-sm-6">  
                                <div  class="myOwnDdl">  
                                    <select  name="expendProject" id="radioSelect" >  
                                            <option value="1">AAAAAAAA1</option>  
                                            <option value="2">BBBBBBBB2</option>  
                                            <option value="3">CCCCCCCC1</option>  
                                            <option value="4">DDDDDDDD2</option>  
                                            <option value="5">EEEEEEEE3</option>  
                                            <option value="6">FFFFFFFF4</option>  
                                            <option value="7">GGGGGGGG3</option>  
                                            <option value="8">HHHHHHHH5</option>  
                                            <option value="9">TTTTTTTT4</option>  
                                    </select>  
                                </div>  
                            </div>  
                        </div>  
</body>  
</html>

源码下载地址：[https://download.csdn.net/download/liqi\_q/10551896][https_download.csdn.net_download_liqi_q_10551896]

[https_download.csdn.net_download_liqi_q_10551896]: https://download.csdn.net/download/liqi_q/10551896