Bootstrap Select元素首次点击无法展开选项问题求助

问题描述 #

页面中有4个使用bootstrap-select的多选下拉组件，首次点击时无法展开选项列表，但后续点击可正常展开，需实现首次点击即可展开的效果。

代码问题分析 #

1. 资源加载位置错误：CSS和JS资源被放在{% block content %}内部，可能与base.html中的资源重复加载，或导致样式/脚本初始化时机异常。
2. 初始化方式不当：使用原生JS的new bootstrap.Select()初始化组件，而bootstrap-select是基于jQuery的插件，该方式可能无法正确绑定点击事件，引发首次点击失效。
3. 脚本加载顺序问题：脚本放置在页面中间，可能在DOM元素完全渲染前执行初始化，导致组件绑定不完整。
4. 重复的name属性：多个select组件使用相同的name="src"，虽不直接影响展开，但不符合规范，可能引发潜在问题。

解决方案 #

1. 调整资源加载位置 #

将CSS资源移至base.html的<head>标签中，确保仅加载一次；将JS资源移至页面底部（{% block content %}结束前或base.html底部），避免阻塞DOM渲染。

2. 使用jQuery方式初始化组件 #

替换原生JS初始化代码，改用bootstrap-select官方推荐的jQuery初始化方式：

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

3. 修正完整模板代码 #

调整资源位置、修正name属性，确保初始化脚本正确：

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

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

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

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

<!-- 补充第四个select组件 -->
<div class="input-group">
  <select class="selectpicker" multiple data-live-search="true" id="src4" name="src4">
    <option value="value">Label</option>
  </select>
</div>

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

    {% 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 %}

{% block extra_js %}
<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>
    $(document).ready(function() {
        $('.selectpicker').selectpicker();
    });
</script>
{% endblock extra_js %}

4. 额外说明 #

• 确保base.html未重复加载相同的CSS/JS资源，避免冲突。
• 若base.html已引入jQuery、Bootstrap相关资源，仅需引入bootstrap-select的JS和初始化脚本即可。
• 使用$(document).ready()确保DOM完全加载后再初始化组件，避免因元素未渲染导致的初始化失败。

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