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

Posted 2023-05-08

【中文标题】Select2 多选只返回第一个选中项

【英文标题】：Select2 multiselect only returns the first selected item

【发布时间】：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[]，但这没有效果。我在网上搜索了很多解决方案，但都没有找到。

【参考方案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="">

那么你已经在数组中了。