Html 在单个模板中选择多个选项会导致问题

我正在尝试实现这一点，选择项目是一个多选下拉菜单，过滤结果是一个折叠按钮，单击该按钮时会有另外三个多选下拉菜单。我使用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>

选择项目：
{%for project_names%}中的项目
{%if选择了显示中的项目\%u}
{{project}}
{%else%}
{{project}}
{%endif%}
{%endfor%}


提交


筛选结果


苹果
芒果
葡萄


红色
橙色
绿色


奶酪
橄榄
辣椒


刷新
$（'.select'）.select（）；
$（'.chzn select'）.selected（）；

修复了此更改的问题：$（'.chzn select'）.selected（{width:'100%}）