javascript - 如何使用 select2 和 Twig 模板从选择列表中设置选定的新值？

Question

我一直在努力让它发挥作用。

我有一个下拉菜单(通过使用 HTML select 标签和 select2.js)。在数据库中，我有两个值，这些值是检索出来的，这些是值:

[{"type":"value1"},{"type":"value2"}]

我用 Twig 显示数据如下:

<select multiple="" style="width: 100%" name="type" id="types" class="select2 req_place form-control input-sm">
                                        {% for type in types %}
                                        <option value="{{type.type}}" {% if request.post('type')==type.type %}selected{% endif %}{% if proyecto_o.type==type.type and request.post('type') is empty %}selected{% endif %}>{{type.type}}</option>
                                        {% endfor %}
                                    </select>

这很好用。例如，如果表单由于另一个字段验证失败而返回错误，则先前选择的选项将显示为已选择。

但是，如果用户键入新值(允许)，如下所示:

$("#types").select2({
    placeholder: "Seleccione...",
    allowClear: true,
    tags: true, /*This allows the user to type  a new value*/
    language: "es",
    maximumSelectionLength: 1,
});

新值未按选定方式显示。我尝试了很多方法来解决这个问题，但我不知道如何解决它。

例如，在我的一次尝试中，如果我添加以下代码

事实上，新值仍然显示为选定值，但是，如果我从数据库中选择现有值，它会显示为选定值的两倍! 我尝试检查数组中是否存在新值，但仍然不起作用。

<select multiple="" style="width: 100%" name="type" id="types" class="select2 req_place form-control input-sm">
                                        {% for type in types %}
                                        <option value="{{type.type}}" {% if request.post('type')==type.type %}selected{% endif %}{% if proyecto_o.type==type.type and request.post('type') is empty %}selected{% endif %}>{{type.type}}</option>
                                        {% endfor %}
                                        {% if request.post('type') not in types %}
                                        <option value="{{request.post('type')}}" selected>{{request.post('type')}}</option>
                                        {% endif %}
                                    </select>

即使我假装检查数组中是否不存在这个新类型的值以将其在下拉菜单中选择，但它还不起作用，因为如果我选择数据库中已存在的值，它出现两次选择。如果我选择一个新的，一旦选择它就会出现，这很好。

有什么办法可以解决这个问题吗？如何使数据库中已经存在的值不出现两次选择？

Answer 1

已解决

我已经找到了如何通过使用标志来使其工作。

<!-- Types-->
{% set type_flag = 0 %}
<div class="col-sm-6 col-md-6 col-lg-6">
    <div class="form-group {% if errors.has('type') %} has-error {% elseif request.post('type')%}has-success{% endif %}">
        <label for="types" class="control-label{% if proyecto_o.type %} text-primary{% endif %}">type</label>
        <select multiple="" style="width: 100%" name="type" id="types" class="select2 req_place form-control input-sm">
            {% for type in types %}
                <option value="{{type.type}}" {% if request.post('type')==type.type %}selected{% endif %}{% if proyecto_o.type==type.type and request.post('type') is empty %}selected{% endif %}>{{type.type}}</option>
                {% if request.post('type')==type.type %}{% set type_flag=1 %}{% endif %}
                {% if proyecto_o.type==type.type and request.post('type') is empty %}{% set type_flag=1 %}{% endif %}
            {% endfor %}
            {% if type_flag==0 and request.post('type') %}
                <option value="{{request.post('type')}}" selected>{{request.post('type')}}</option>
            % endif %}
        </select>
        {% if errors.has('type') %} <p class="help-block bg-danger">{{ errors.first('type') }}</p> {% endif %}
        <p class="help-block">Flag: {{ type_flag }}</p>
    </div>
</div>

现在新值和已注册的值都显示为已选择。

如果其他人有更好的方法来做到这一点，我会将您的答案标记为已接受的答案并已投票。没问题。