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

Question

I am trying to control the displayed height of the jQuery Chosen drop down. The following code does not seem to have an affect on the height.

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

Why don't you simply use CSS to do that?

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

UPDATE:

To use it for different sizes add multiple custom classes:

.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

The only problem with your current code is that you forgot the following (see 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.

Currently only the font-size is applied and max-height is ignored. Your code should work if you remove the !important bit.

 $('.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>