如何使用select2和Twig模板从选择列表中选择一个新值?

时间:2015-11-25 15:57:58

标签: javascript jquery twig jquery-select2

我一直在努力使其发挥作用。

我有一个下拉菜单(使用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>

即使我假装检查数组中是否存在这个新类型的值以便在下拉菜单中将其选中,但它还没有工作,因为如果我选择一个已经存在的值数据库,它出现两次选中。如果我选择一个新的,它会在选中后出现,这很好。

有什么想法来解决这个问题?如何使数据库中已存在的值不会出现两次选择?

1 个答案:

答案 0 :(得分: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>

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

如果其他人有更好的方法来做到这一点,我会将你的回答标记为已接受的加上upvoted。没问题。