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

修正了此更改的问题：$（＆＃39; .chzn-select＆＃39;。）。（{width：＆＃39; 100％＆＃39;}）;

在单个模板中进行多次选择 - 选择会导致问题

1 个答案: