jQuery的控制高度選擇下拉列表

Question

我正在嘗試控制 jQuery Chosen 下拉菜單的顯示高度。 以下代碼似乎對高度沒有影響。

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<div class="hide">
    <INPUT type="text" class="namecontrol" size="1" value="${employeeMasterParmsObj.controller}">
</div>

    <select class="usernamelist">
        <option value="0">Select from List</option>
        <c:forEach var="itemName" varStatus="status" items="${employeeMasterListObj.employeeMasterList}">
            <option value="${itemName.badge}-${itemName.fname} ${itemName.lname}">${itemName.fname}&nbsp;&nbsp;${itemName.lname}&nbsp;&nbsp;${itemName.badge}-${itemName.jobclassdescp}</option>
        </c:forEach>
    </select>

<script type="text/javascript">
$(document).ready(function(){

    $('.usernamelist').chosen({ width: "400px"});
    $(".chosen-results").css({'font-size':'10px', 'max-height':'150px !important'});
    $(".chosen-container").css({'font-size':'10px', 'max-height':'150px !important'});
                    
    $('.usernamelist').on("change", function(){
        if(this.value != "0"){
            putUserName(this.value);
        }
    });
});

}

Answer 1

你為什么不簡單地使用 CSS 來做到這一點？

.chosen-container .chosen-results {
    max-height: 150px !important;
}

更新：

要將其用於不同的尺寸，請添加多個自定義類：

.chosen-small .chosen-container .chosen-results {
    max-height: 150px !important;
}
.chosen-medium .chosen-container .chosen-results {
    max-height: 250px !important;
}
.chosen-large .chosen-container .chosen-results {
    max-height: 350px !important;
}

Answer 2

當前代碼的唯一問題是您忘記了以下內容（請參閱css ）：

注意： .css()忽略!important聲明。 因此，語句$( "p" ).css( "color", "red !important" )不會將頁面中所有段落的顏色變為紅色。 強烈建議改用類； 否則使用 jQuery 插件。

當前僅應用font-size並忽略max-height 。 如果您刪除!important位，您的代碼應該可以工作。

 $('.usernamelist').chosen({ width: "400px"}); $(".chosen-results").css({'font-size':'10px', 'max-height':'150px'}); $(".chosen-container").css({'font-size':'10px', 'max-height':'150px'});

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script> <select class="usernamelist"> <option value="0">Select from List</option> <option value="1">Aphrodite</option> <option value="2">Apollo</option> <option value="3">Ares</option> <option value="4">Artemis</option> <option value="5">Athena</option> <option value="6">Hades</option> <option value="7">Hephaestus</option> <option value="8">Hera</option> <option value="9">Hermes</option> <option value="10">Hestia</option> <option value="11">Poseidon</option> <option value="12">Zeus</option> </select>