Bootstrap Select多选下拉框初始视图复选框不显示问题求助

Hey Sam, let's work through why those checkboxes aren't showing up in your Bootstrap Select multi-select when no options are selected yet. Here are the most likely fixes to test out:

1. Double-Check the Initialization Timing #

Bootstrap Select needs to initialize after the DOM is fully loaded. Make sure you're wrapping the initialization code in a DOM-ready handler, like this:

$(document).ready(function() {
  $('.selectpicker').selectpicker();
});

If your <select> element is added dynamically (e.g., via AJAX), you'll need to call $('.selectpicker').selectpicker(); after the element is inserted into the DOM, not just on page load.

2. Fix the Empty Value Option #

Your first option has an empty value attribute (<option value="">apple </option>) which might be throwing off the initial rendering. Bootstrap Select can behave unexpectedly with empty-value options in multi-select mode. Try updating that option to have a valid value:

<option value="apple">apple</option>

If you intended that as a placeholder, note that the title attribute on the <select> already handles the initial placeholder text ("fruits"), so you don't need an empty-value option for that.

3. Verify Correct Loading of CSS/JS Files #

Order matters here! Make sure you're loading the dependencies in the right sequence:

<!-- First, Bootstrap's core CSS -->
<link rel="stylesheet" href="path/to/bootstrap.min.css">
<!-- Then Bootstrap Select's CSS -->
<link rel="stylesheet" href="path/to/bootstrap-select.min.css">

<!-- Next, jQuery (required for both Bootstrap and Bootstrap Select) -->
<script src="path/to/jquery.min.js"></script>
<!-- Then Bootstrap's JS -->
<script src="path/to/bootstrap.min.js"></script>
<!-- Finally, Bootstrap Select's JS -->
<script src="path/to/bootstrap-select.min.js"></script>

If any of these files are missing or loaded out of order, the checkbox styles won't apply, making them invisible.

4. Explicitly Enable Checkbox Display #

You can force the checkboxes to show by setting the showTick option to true during initialization:

$('.selectpicker').selectpicker({
  showTick: true,
  noneSelectedText: 'fruits' // Optional: matches your existing title text
});

This ensures the tick/checkbox UI is explicitly enabled, even in the initial unselected state.

5. Check for Custom Style Conflicts #

Sometimes custom CSS can override Bootstrap Select's default styles and hide checkboxes. Look for any CSS rules that target .bootstrap-select .bs-checkbox input or similar selectors, like:

.bootstrap-select .bs-checkbox input {
  display: none;
}

If you find rules like this, remove them or adjust the specificity so they don't affect the Bootstrap Select checkboxes.

Start with the first few steps (initialization and option fix) since those are the most common culprits, then work your way down if needed.

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