单个模板中的多个选择选择导致问题

Question

我正在尝试实现这个，其中选择项目是一个多选下拉菜单，过滤结果是一个折叠按钮，单击该按钮时会出现另外三个多选下拉菜单。我正在使用 selected-select 来实现多选下拉菜单。

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

另外，如果仔细观察，在选择框应该存在的折叠部分中有线条，如果我点击它，我可以看到线条在延伸，但它的宽度为零。

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

    <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%'});