我有一個有四個選擇的html模板。同樣的事情發生在我身上。當我第一次點擊選擇時，它不會打開，但在那之后，它會打開。我希望選項也是第一次開放。選擇是這樣的:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
 

 <div class="input-group">
                <select class="selectpicker" multiple data-live-search="true" id="src" name="src">
                    {% for value, label in jobs%}
                    <option value="{{ value }}">{{ label }}</option>
                {% endfor %}
                </select>
    
            </div>

javaScript部分是這樣的。我已經用許多方法試圖做它，但是我不能。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
    <script>
        // Wait for the DOM to be ready
        document.addEventListener("DOMContentLoaded", function() {
          
        // Select all <select> elements
        var selectElements = document.querySelectorAll("select");
    
        // Apply the Bootstrap Select plugin to each <select> element
        selectElements.forEach(function(selectElement) {
            console.log("DOM ready");
            new bootstrap.Select(selectElement);


        });
    });

    </script>

這是這樣的觀點:

def jos(request):
    context = {
        'jobs': get_values()
    }

    return render(request, 'myHtml.html', context)

// Wait for the DOM to be ready
    document.addEventListener("DOMContentLoaded", function() {

      // Select all <select> elements
      var selectElements = document.querySelectorAll("select");

      // Apply the Bootstrap Select plugin to each <select> element
      selectElements.forEach(function(selectElement) {
        new bootstrap.Select(selectElement);
      });
    });

{% extends "base.html" %}
{% load i18n %}

{% block content %}
{% for group in user.groups.all %}
    {% if group.customgroup.access_level == 1 or group.customgroup.access_level == 2 %}
    <br>

<link rel="stylesheet" >
<link rel="stylesheet"  />

<div class="input-group">
  <select class="selectpicker" multiple data-live-search="true" id="src1" name="src">
    <option value="value">Label</option>
  </select>
</div>

<div class="input-group">
  <select class="selectpicker" multiple data-live-search="true" id="src2" name="src">
    <option value="value">Label</option>
  </select>
</div>

<div class="input-group">
  <select class="selectpicker" multiple data-live-search="true" id="src3" name="src">
    <option value="value">Label</option>
  </select>
</div>


    <a href="{% url 'main_page' %}" class="btn btn-dark text-white">{% trans 'mainPage' %}</a>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
    {% else %}
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-lg-6 col-md-8 col-sm-10">
                <div class="alert alert-danger" role="alert">
                    <h4 class="alert-heading">{% trans 'noAccess' %}</h4>
                    <p>{% trans 'mensajeErrorAccess' %}</p> 
                </div>
            </div>
        </div>
    </div>
    {% endif %}
{% endfor %}
{% endblock content %}

你沒有包括引導樣式表，所以你應該包括下面的css庫:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">