Select2 多选只返回第一个选中项答案

【问题标题】：Select2 multiselect only returns the first selected itemSelect2 多选只返回第一个选中项
【发布时间】：2019-08-16 10:07:15
【问题描述】：

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

sn-p（这是一个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});
  });

一切都按预期工作，除了当我检查返回值时，只有每个多选中选择的第一项被传递。

我已尝试按照其他地方的建议将选择标签的name 命名为name[]，但这没有效果。我在网上搜索了很多解决方案，但都没有找到。

【问题讨论】：

标签： jquery-select2 jquery-select2-4

【解决方案1】：

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

以下示例在从下拉列表中选择值时将所选值存储到ajaxOptions.data.selectedValues。

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

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

JsFiddle 示例：https://jsfiddle.net/g7nkfpca/

编辑答案：

您也可以使用原生 HTML 表单提交。首先，您需要以数组格式指定名称以选择标签，如下所示。

<select id="{{'node_%s' % param['node_id']}}" name="{{'node_%s' % param['node_id']}}[]" multiple='multiple' class="uk-select uk-form-width-large">

在您的 PHP 代码中，迭代 $_POST 数据以一一获取所有选定的选项，请参见下面的代码。

// Check if any option is selected 
if(isset($_POST["node_XXX"]))  
{ 
   // Retrieving each selected option 
   foreach ($_POST['node_XXX'] as $node)  
   print "You selected $node<br/>"; 
}

在上面的代码中，XXX 是您可以替换的param['node_id']。

【讨论】：

谢谢。我可以将该值分配给选择对象，以便在正常提交表单时传递它吗？否则我必须手动收集所有字段的值（有很多，它们是动态创建的）并使用表单进行 ajax 调用，而不是仅仅使用标准的 html 表单（这是第一次使用 Select2 的原因地点）。
@user11075824，根据您的评论，我已经更新了我的答案，请查看我更新后的答案，希望对您有所帮助。

【解决方案2】：

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

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

那么你已经在数组中了。

【讨论】：