select2 多选框仅将最后选择的值放入数组

Posted 2023-05-07

技术标签:

【中文标题】select2 多选框仅将最后选择的值放入数组【英文标题】：select2 multi select box only takes in the last selected value into the array 【发布时间】：2020-03-02 02:11:09 【问题描述】：

我最近尝试使用select2 987654322 @ app，select2 @ box正确显示，我可以选择类似的多个选项，但是当所选值采取时出现问题数组，

这是我的代码：

html页面：

<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="% static 'js/vendor/jquery-3.4.1.min.js' %"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
    <script>
        $(document).ready(function() 
            $('.recipientMultiSelect').select2(
                placeholder: "Choose Recipient Numbers / Groups",
                tags: true
            );
        );
    </script>
</head>

<body>
        <form action="% url 'broadcast_single' %" method="POST">
            % csrf_token %
            <div class="col-md-4">    
                <div class="form-group">
                    <label for="broadcast_name" class="col-form-label"> Broadcast Name: </label>
                    <input type="text" name="broadcast_name" class="form-control" required>
                </div>
            </div>
            <div class="col-md-4">    
                <div class="form-group">
                    <label for="recipients[]" class="col-form-label"> Recipient List: </label>
                    <select class="recipientMultiSelect form-control" name="recipients[]" multiple="multiple" required>
                        <option value="aaaaaa">aaaaaa</option>
                        <option value="bbbbbb">bbbbbb</option>
                        <option value="cccccc">cccccc</option>
                    </select>
                </div>
            </div>
            </br>
            </br>
            </br>
            </br>
            <div class="col-xs-8 col-md-8">    
                <div class="form-group">
                    <label for="broadcast-content" class="col-form-label"> SMS Content: </label>
                    <textarea name="broadcast_content" rows="15" cols="85" maxlength="160" class="form-control"> </textarea>
                </div>
            </div>
            <div class="col-xs-8 col-md-8">    
                <div class="form-group">
                    <button class="btn btn-primary btn-block mt-4" type="submit">Send Broadcast</button>    
                </div>
            </div>
        </form>
</body>

假设选择了所有 3 个选项并将其传递到数组 recipients[]

views.py：

def broadcastSingle(request):
    if request.method == 'POST':
        bcName = request.POST['broadcast_name']
        bcRecArray = request.POST['recipients[]']
        bcContent = request.POST['broadcast_content']


        print('PRINT : ',len(bcRecArray))
        print(', '.join(bcRecArray))

bcRecArray 应该包含 [ 'aaaaaa', 'bbbbbb', 'cccccc'] 并且长度应该是 3

但是，bcRecArray 有 [ 'c', 'c', 'c', 'c', 'c', 'c'] 并且长度为 6

我认为，select2 多选框只取最后一个选定的值，并将其转换为选定值中的字母数组。

【问题讨论】：

【参考方案1】：

我从这个帖子中找到了答案： Django: using <select multiple> and POST

我应该改用 request.POST.getlist('recipients')，因为 [] 在 django 中不起作用，因为它只是一种仅限于 php 的约定。

谢谢你，我会关闭这个帖子。

【讨论】：

【参考方案2】：

我在使用bootstrapDualListbox 时遇到了同样的问题。我想出的解决方案是使用隐藏文本字段，然后在提交时，将多选中的值复制到隐藏文本字段中：

        // "employees" is a jQuery handle to the multi-select.
        let data = employees.val();
        if (data.length === 0) 
            submitError('<p> _('No employees selected') </p>', event);
         else 
            //
            // We want ints, not strings.
            //
            data = data.map(x => parseInt(x));
            snapshot.val(JSON.stringify("employees": data));

回到服务器上，当然必须根据需要从隐藏的文本字段中解压缩 JSON。

【讨论】：

以上是关于select2 多选框仅将最后选择的值放入数组的主要内容，如果未能解决你的问题，请参考以下文章

如何将多选框的值发送到 django 后端