单个模板中的多个 chosen-select 导致问题

Question

我正在尝试实现此，其中 Select 项目是一个多 select 下拉菜单，过滤结果是一个折叠按钮，单击该按钮时还有另外三个多 - select 下拉菜单。我正在使用 chosen-select 来实现 multi-select 下拉菜单。

我的 Select 项目工作正常，我的过滤器结果折叠按钮也工作正常。但在折叠按钮内，三个下拉菜单不起作用（如图所示）。当我从第一个下拉列表中删除 chosen-select 时，我可以看到 selection box 工作正常但它不再是下拉列表。我还尝试将 select 中的 class 重命名为其他名称，但仍然无法正常工作。

此外，如果仔细观察，在 selection box 应该出现的折叠部分有线，如果我点击它，我可以看到线延伸但它的宽度为零。

请帮助我，我尝试了很多东西，但没有运气。下面是代码。提前致谢。

    <div class="container">
        <div class="col-md-5" style="margin: 30px;">
            <h3 style="font-variant: small-caps;">Select Projects:</h3>
            <form id="selectProject" role="search" method="get" action="{% url 'select_projects' %}">
                <select name="params[]" data-placeholder="Choose projects" class="chosen-select" multiple tabindex="4">
                    {% for project in project_names %}
                        {% if project in display_selected %}
                            <option value="{{ project }}" selected="selected"> {{ project }}</option>
                        {% else %}
                            <option value="{{ project }}"> {{ project }} </option>
                        {% endif %}
                    {% endfor %}
                </select><br/>
                <label for="submit"></label><button id="submit" type="submit" class="btn btn-default" style="padding: 5px 40px;">Submit</button>
            </form>
        </div>
    </div>

    <div><br /></div>

    <div class="container">
        <div class="col-md-5" style="margin: 30px;">
            <div class="row">
                <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#filterParam">
                    Filter Results
                </button>
            </div>

            <div class="collapse" id="filterParam">
                <form id="selectFilters" role="search" method="get" action="{% url 'select_projects' %}">
                    <div class="form-group"><div><br /></div>
                        <select name="fruit[]" data-placeholder="Choose fruits" multiple tabindex="4" style="width: 200px;">
                            <option> apple </option>
                            <option> mango </option>
                            <option> grapes </option>
                        </select><div><br /></div>
                        <select name="color[]" data-placeholder="Choose colors" class="chzn-select" multiple tabindex="4" style="width: 200px;">
                            <option> red </option>
                            <option> orange </option>
                            <option> green </option>
                        </select><div><br /></div>
                        <select name="toppings[]" data-placeholder="Choose toppings" class="chosen-select" multiple tabindex="4" style="width: 200px;">
                            <option> cheese </option>
                            <option> olives </option>
                            <option> peppers </option>
                        </select><div><br /></div>
                    </div>
                    <label for="submitFilters"></label><button id="submitFilters" type="submit" class="btn btn-default" style="padding: 3px 15px;">Refresh</button>
                </form>
            </div>
        </div>
    </div>

<script src="{% static 'app/js/chosen.jquery.js' %}"></script>
<script>
    $('.chosen-select').chosen();
    $('.chzn-select').chosen();
</script>

Answer 1

修复了此更改的问题：$('.chzn-select').chosen({width: '100%'});

单个模板中的多个 chosen-select 导致问题

Multiple chosen-select in a single template causing problems

html

jquery-chosen

django-bootstrap3