欢迎来到HELLO素材网! 南京网站制作选择顺炫科技
丰富的DIV CSS模版、JS,jQuery特效免费提供下载
当前位置:主页 > 建站教程 > DIVCSS教程 >

multiselect 显示问题

发表于2017-11-25 08:47| 次阅读| 来源网络整理| 作者session

摘要:Bootstrap-multiselect 显示问题 - div的高度是固定的,但是查询条件需要很多,所以div的style添加了overflow:auto;但是加了这个属

div的高度是固定的,但是查询条件需要很多,所以div的style添加了overflow:auto;但是加了这个属性后,下拉框就没有悬浮在最上层了..而是只显示在div内,需要拖动滚动条才能查看.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html>
<head>
<title> New Document </title>

<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-multiselect.js"></script>
<script type="text/javascript" src="bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="bootstrap-datetimepicker.zh-CN.js"></script>

<link rel="stylesheet" href="bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="bootstrap-multiselect.css" type="text/css"/>
<link rel="stylesheet" href="bootstrap-datetimepicker.min.css" type="text/css"/>


</head>

<body>
    <div style="width:500px;height:150px;background:yellow;overflow:auto">
            <table>
                <tr>
                    <td>
                        <select id="text" name="text" multiple="multiple">
                            <option value="a" selected>A</option>
                            <option value="a" selected>A</option>
                            <option value="a" selected>A</option>
                            <option value="a" selected>A</option>
                            <option value="a" selected>A</option>
                            <option value="a" selected>A</option>
                            <option value="a" selected>A</option>
                            <option value="a" selected>A</option>
                            <option value="a" selected>A</option>
                            <option value="a" selected>A</option>
                            <option value="a" selected>A</option>
                            <option value="a" selected>A</option>
                            <option value="a" selected>A</option>
                            <option value="a" selected>A</option>
                            <option value="a" selected>A</option>
                            <option value="a" selected>A</option>
                            <option value="a" selected>A</option>
                            <option value="a" selected>A</option>
                            <option value="a" selected>A</option>
                            <option value="a" selected>A</option>
                            <option value="a" selected>A</option>
                            <option value="a" selected>A</option>
                            <option value="a" selected>A</option>
                            <option value="a" selected>A</option>
                            <option value="a" selected>A</option>
                        </select>
                    </td>
                </tr>
            </table>
    </div>
    <div style="width:500px;height:150px;background:blue">
    </div>
</body>
</html>
<script>
$(document).ready(function(){
$("#test").multiselect({
        nonSelectedText:"",
        includeSelectAllOption: true,
        enableFiltering: true,
        numberDisplayed: 100,
        maxHeight:200
    });
});

</script>