使用Bootstrap Select与主题JS时，jQuery追加选项不显示问题求助

Hey there! I’ve run into this exact issue with Bootstrap Select before—let me walk you through what’s happening and how to fix it.

What’s Causing the Problem? #

Bootstrap Select doesn’t just style your native <select> element—it replaces it with a custom UI layer (that button and div you spotted in dev tools) while hiding the original select. When you use jQuery to append options directly to the native select, the component has no idea you’ve made changes, so it doesn’t update its custom dropdown UI to match the new options.

Let’s Break Down Your Code Context #

Based on your Blade template and dev tools output, here’s what your setup likely looks like:

Laravel Blade Template Code

<select id="target-select" class="selectpicker" data-live-search="true">
    @foreach($options as $option)
        <option value="{{ $option->id }}">{{ $option->name }}</option>
    @endforeach
</select>

<script>
    // Your original attempt to add an option
    $('#target-select').append('<option value="new-option-id">New Option</option>');
</script>

Browser Dev Tools Output (Simplified)

<div class="bootstrap-select show-tick">
    <button type="button" class="btn dropdown-toggle bs-placeholder btn-light" data-toggle="dropdown">
        <div class="filter-option-inner-inner">Select an option</div>
        <span class="bs-caret"><span class="caret"></span></span>
    </button>
    <div class="dropdown-menu dropdown-menu-right">
        <!-- Only original options appear here -->
    </div>
    <select id="target-select" class="selectpicker" tabindex="-98" style="display: none;">
        <!-- Native select has your new option, but it's hidden -->
        <option value="1">Original Option 1</option>
        <option value="new-option-id">New Option</option>
    </select>
</div>

The Fix: Refresh Bootstrap Select’s UI #

After appending options to the native select, you need to explicitly tell Bootstrap Select to re-render its custom UI. Use the component’s built-in refresh method:

<select id="target-select" class="selectpicker" data-live-search="true">
    @foreach($options as $option)
        <option value="{{ $option->id }}">{{ $option->name }}</option>
    @endforeach
</select>

<script>
    // Append the new option to the native select
    $('#target-select').append('<option value="new-option-id">New Option</option>');
    
    // Refresh Bootstrap Select to sync the UI with the updated native select
    $('#target-select').selectpicker('refresh');
    
    // Optional: Set the new option as selected (if needed)
    $('#target-select').selectpicker('val', 'new-option-id');
</script>

Key Tips #

• Batch Updates: If you’re adding multiple options at once, append all of them first, then call refresh once—this is more efficient than refreshing after each individual addition.
• Full Rebuild: If you need to replace all existing options entirely, you can destroy the component first with $('#target-select').selectpicker('destroy'), update the native select, then reinitialize it with $('#target-select').selectpicker();.

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