Высота элемента управления jQuery выбранного раскрывающегося списка

Question

Я пытаюсь контролировать отображаемую высоту раскрывающегося списка jQuery Выбрано. Следующий код, похоже, не влияет на высоту.

<%@ 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>