如何固定多选select元素宽高？解决多选时区域扩展问题

Hey there! I totally get what you're dealing with—multi-select dropdowns using Chosen can start stretching out as you pick more options, which is super annoying. Let's get this fixed so your dropdown stays at a nice, fixed size, just like the example you saw. Here's exactly how to do it:

Step 1: Make sure you have all the right dependencies #

First, Chosen relies on jQuery, so you need to load that first, followed by Chosen's CSS and JavaScript files. The order matters here—don't skip this or Chosen won't work right!

<!-- Load jQuery first -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Chosen's stylesheet (to make it look good) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css">
<!-- Chosen's JavaScript file -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>

Step 2: Set up your HTML select element #

Make sure your select has the multiple attribute and the class chosen-select (or whatever class you want to target—just match it in your jQuery code):

<select class="chosen-select" multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
  <option value="date">Date</option>
  <option value="elderberry">Elderberry</option>
</select>

Step 3: Initialize Chosen with fixed size settings #

This is where we tell Chosen to stay at a fixed width. You can set the width directly in the Chosen initialization options, or use CSS to lock down the height too (in case you want to prevent vertical expansion when selecting lots of options).

Option A: Fixed width via Chosen's built-in setting #

Add the width parameter to your Chosen initialization—this will keep the dropdown from stretching horizontally:

$(".chosen-select").chosen({
  no_results_text: "Oops, nothing found!",
  width: "350px" // Adjust this to your desired fixed width (can use % too, like "100%")
});

Option B: Fixed height (plus width) with CSS #

If you also want to stop the vertical expansion when you select multiple options (so the selected tags don't make the box grow taller), add this CSS to lock the height and add a scrollbar when needed:

/* Target the Chosen multi-select's selected tags container */
.chosen-container-multi .chosen-choices {
  height: 70px; /* Set your desired fixed height */
  overflow-y: auto; /* Add vertical scroll when content exceeds the height */
  padding: 5px; /* Optional: adjust padding to make it look better */
}

Why this works #

By default, Chosen automatically adjusts the dropdown's size to fit the content you select. The width option in initialization forces a horizontal fixed size, and the CSS for .chosen-choices locks the vertical space—giving you that clean, fixed-size dropdown you want.

Just double-check that all your scripts are loaded in the right order (jQuery first, then Chosen's CSS, then Chosen's JS) and you're good to go!

内容的提问来源于stack exchange，提问作者Newbie