十月CMS创建多选表单字段

Question

我需要在October Cms的后台表单(fields.yaml)中创建一个多选表单字段。我采用了以下方法：

select_field:
     label: 示例
     type: dropdown
     attributes: {multiple:'multiple'}

此字段的选项将从模型中调用。

一切都很好，但当我提交表单时，只有首选选项被插入到数据库表文本字段中作为JSON数据。我想要存储每个选择的选项。我还在模型中声明了该字段为Jsonable，即protected $jsonable = ['field_name'];

注意：当我使用checkboxlist类型时，它按照我的想法工作，但我不想使用checkboxlist。我对October cms很新，请问有什么简单的方法吗..

- Vijay Wilson

Answer 1

你可以使用“taglist”小部件来实现这个功能；-)

- Urgotto

---

请注意，taglist仅在最新版本的octobercms中添加，而不是在beta版中。 - Vijay Wilson

@VijayWilson，没错，如果你没有它，那么你可以用“repeater + checkbox”或“belongsToMany relation”替换select ui，它们可以拥有相同的功能，但是另一种视图。 - Urgotto

是的，你说得对，但实际上要求放置一个多选下拉框。 - Vijay Wilson

我不理解taglist。它位于backend/formwidgets/中，与所有其他小部件一起，但您无法通过builder > models选择它？ - Empi

抱歉，我无法再找到它了。 - Urgotto

Answer 2

另外，daftspunk提出了一个解决方法：https://github.com/octobercms/october/issues/1829#issuecomment-193018469

- mahony0

Answer 3

您不能使用具有多个值的下拉字段，因为它只适用于处理单个值。与复选框和单选按钮一样，这就是为什么有复选框列表（我猜）。

但我找到了一种解决方案。 在fields.yaml中使用partial作为字段类型，而不是下拉菜单。

https://octobercms.com/docs/backend/forms#field-partial

创建一个包含以下内容的部分（注意name属性中的[]，这就是它起作用的原因！）

但要注意，这只是一个技巧，你只能使用直接的yaml选项赋值。https://octobercms.com/docs/backend/forms#field-dropdown

<?php
    $fieldOptions = $field->options();
    //get the field value as an array
    $selectedValues = (array)$field->value;

?>
<!-- Dropdown -->
<?php if ($this->previewMode): ?>
    <div class="form-control"><?= (isset($fieldOptions[$field->value])) ? e(trans($fieldOptions[$field->value])) : '' ?></div>
<?php else: ?>

    <select
        id="<?= $field->getId() ?>"
        name="<?= $field->getName() ?>[]"
        class="form-control custom-select"
        <?= $field->getAttributes() ?>>
        <?php if ($field->placeholder): ?>
            <option value=""><?= e(trans($field->placeholder)) ?></option>
        <?php endif ?>
        <?php foreach ($fieldOptions as $value => $option): ?>
            <?php
                if (!is_array($option)) $option = [$option];
            ?>
            <option

                <?= in_array($value, $selectedValues)  ? 'selected="selected"' : '' ?>
                <?php if (isset($option[1])): ?>data-<?=strpos($option[1],'.')?'image':'icon'?>="<?= $option[1] ?>"<?php endif ?>
                value="<?= $value ?>">
                    <?= e(trans($option[0])) ?>
            </option>
        <?php endforeach ?>
    </select>
<?php endif?>

并且对于yaml

```
select_field:
    label: Sample
    type: partial
    path:$/author/plugin/models/classfolder/_my_partial.htm
    attributes: {multiple:'multiple'}
    options:
        key:value
        key:value
```

更好的方法可能是构建一个小部件或者提交一个拉取请求。 如果您有能力，可以触及核心并添加相同的内容到\modules\backend\widgets\form\partials 下的名为_field_dropdownlist.htm的文件中， 然后在\modules\backend\widgets\form\Form.php文件的第630行进行更改：

$optionModelTypes = ['dropdown', 'radio', 'checkboxlist', 'balloon-selector'];

要添加您的部分名称，不包括_field或.htm，例如_field_dropdownlist.htm变为dropdowList

$optionModelTypes = ['dropdown', 'radio', 'checkboxlist', 'balloon-selector','dropdowlist'];

现在在你的yaml文件中，只需使用type:dropdownList，它就可以工作了。

- Greg Bee

---

我做了和你一样的事情。我创建了一个部分并将多选选项的名称属性设置为数组，一切都运行良好。但是阻止我发布答案的是如何在部分的选择字段中显示所选选项。我想尝试你的第二种方法，即构建小部件。我希望它能够正常工作，谢谢Greg Bee。 - Vijay Wilson

你好，你能告诉我如何将多选字段更新为空值吗？以防用户不想选择任何内容。我已经尝试了很多，但是找不到更好的解决方案。 - Vijay Wilson

我认为最好的方法是通过在控制器中覆盖formBeforeUpdate($model)函数，并检查您的字段是否已发送，然后您可以处理这种情况。 - Greg Bee

嗨，感谢您对Greg的关注。由于我是October CMS的新手，所以无法轻松地找到并在控制器中实现formBeforeUpdate($model)函数。在您有空的时候，我请求您与我分享一些示例或代码的外观。 - Vijay Wilson

Answer 4

要通过表单处理多对多关系，您可以使用多选输入或复选框。 在 October CMS 中，有几个关联表单小部件和标签列表表单小部件来处理这种情况。
在 fields.yaml 中定义以下内容：

# relational form widget
categories: # relationship name  defined in the model
  label: 'Associated categories'
  span: full
  required: 1
  type: relation
  nameFrom: title # db column name to fetch to show the display value

#taglist form widget
  categories:
    label: 'Associated categories'
    span: full
    mode: relation
    required: 1
    type: taglist
    nameFrom: title

- asmmahmud

Answer 5

你可以使用select2 jQuery插件

_widget.htm

<!-- for booking table -->
<select  class="form-control" id="sle1" name="Booking[business_car_id]" >

    <?php   foreach($businesscars as $key => $value): ?>
        <option class="form-control" value="<?php echo $key; ?>" >
             <?php
            echo $value; ?>  
        </option>

    <?php endforeach; ?>
</select>

将select2.js和select2.css分别放置在assets/js和assets/css文件夹中

从这里下载select 2 https://select2.org/getting-started/basic-usage

- Hussain Wali