Question

我有一个使用select2的带有多个multiselect标签的配置表单。使用$('#selectitem').select2('data');时，所选选项可以正确显示，但是在提交表单时，仅传递第一个所选项目。

片段（这是jinja2模板，一个Flask应用程序，带有UiKit3）：

<form action="" method="post">
...
                        {% if param['param_type'] == 'list' %}
                          <select id="{{'node_%s' % param['node_id']}}" name="{{'node_%s' % param['node_id']}}" multiple='multiple' class="uk-select uk-form-width-large">
                            {% for p in param['param_value'] %}
                              <option value='{{ p }}'>{{ p }}</option>
                            {% endfor %}
                          </select>
                        {% else %}
                          <textarea id="{{'node_%s' % param['node_id']}}" name="{{'node_%s' % param['node_id']}}" class='uk-textarea uk-form-width-large'>{{ param['param_value'] }}</textarea>
                        {% endif %}
...
      <button type='submit' name='submit' class='uk-button-default'>Change Settings</button>
</form>

和select2 JS：

  $(document).ready(function() {
      $(".uk-select").select2({closeOnSelect: false});
  });

一切正常，除了我检查返回的值时，仅传递了每个多重选择中选择的第一项。

我已经尝试按照其他地方的建议将select标签的name命名为name[]，但这没有任何效果。我已经做了很多在线搜索以寻找解决方案，但是却空无一物。

Answer 1

从下拉列表中选择一个值后，您可以将选定的值存储到javascript变量中，然后通过ajax调用将该变量传递给服务器。

下面是在从下拉列表中选择值时将所选值存储到<div>{{ bookingdetails?.userName }}</div>中的示例。

bookingdetails

JsFiddle示例：safe navigation operator

编辑后的答案：

您也可以使用本机HTML表单提交。首先，您需要给出名称以选择数组格式的标记，如下所示。

<div *ngIf="bookingdetails">
..
..
</div>

然后在您的PHP代码中，迭代ajaxOptions.data.selectedValues数据以逐一获取所有选定的选项，请参见下面的代码。

var ajaxOptions = {};
var ajaxOptions.data = {};

$(".uk-select").change(function(){
    ajaxOptions.data.selectedValues = $(this).val();
    console.log(ajaxOptions);
  });

在XXX上方的代码中，您可以替换为<select id="{{'node_%s' % param['node_id']}}" name="{{'node_%s' % param['node_id']}}[]" multiple='multiple' class="uk-select uk-form-width-large">。

Answer 2

您可以在元素名称上添加方括号：

<select class="form-control" multiple="multiple" data-plugin="select2" id="id_country" name="id_country[]" required="">

然后将其放入数组中。

Select2 multiselect仅返回第一个选定的项目

2 个答案: