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

Note: .css() ignores !important declarations. So, the statement $( "p" ).css( "color", "red !important" ) does not turn the color of all paragraphs in the page to red. It's strongly advised to use classes instead; otherwise use a jQuery plugin.

目前只应用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>

jQuery 选中下拉列表的控件高度

Control Height of jQuery Chosen Drop Down List

javascript

jquery

jquery-chosen