jQuery选择下拉列表的控制高度答案

【问题标题】：Control Height of jQuery Chosen Drop Down ListjQuery选择下拉列表的控制高度
【发布时间】：2020-08-03 17:39:16
【问题描述】：

我正在尝试控制 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);
        }
    });
});

}

【问题讨论】：

也在这里发布：coderanch.com/t/733252/languages/…

标签： javascript jquery jquery-chosen

【解决方案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;
}

【讨论】：

是的，我已经让它工作了，但是它会影响我使用所选插件的每个地方。而且我可能需要在不同的 div 容器中使用不同的最大高度。

【解决方案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>

【讨论】：