October CMS create a multi select Form field

问题

I need to create a multi select form field in October Cms backend form (fields.yaml). I applied the following method

select_field:
     label: Sample
     type: dropdown
     attributes: {multiple:'multiple'}

Options to this field will be invoked from the model

Everything is working good but when i submit the form only the first selected option is being inserted as JSON data in the database table text field. I want every selected option to be stored. I have also declared the field as Jsonable in model ie., protected $jsonable = ['field_name'];

Note : When I use type as checkboxlist it is working as I thought but I don't want it to be checkboxlist. I'm new to October cms is there any easy way..

回答1:

you can't use a dropdown field with mutiple value because it was made to handle single value. as the checkbox and radio this is why there are checkboxList(i guess).

But i found a solution. Use a partial as field type in fields.yaml instead of dropdown

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

Create a partial with the content below (notice the [] in name attribute this is why it work !)

But be aware that this is just a trick and you can only use direct yaml options assignment 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?>

And for the yaml

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

A better approche would be may be to build a widget or make a pull request if you have the ability you can touch the core and add

the same content in \modules\backend\widgets\form\partials with name _field_dropdownlist.htm

then in \modules\backend\widgets\form\Form.php line 630 change :

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

to add your partial name without _field or .htm ex _field_dropdownlist.htm become dropdowList

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

now in your yaml file juste use type:dropdownList and it will work.

回答2:

Also daftspunk has propose a workaround: https://github.com/octobercms/october/issues/1829#issuecomment-193018469

回答3:

You can use "taglist" widget to do this ;-)

回答4:

you could use select2 jquery plugin

_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>

and put select2.js and select2.css in assets/js and assets/css forlder respectively

download select 2 from here https://select2.org/getting-started/basic-usage

回答5:

To handle Many to Many relation through form, you can use multi select input or checkboxes. In october cms, there are couple relational form widget and taglist form widget to handle this kind of situations.
In the fields.yaml define the following:

# 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

来源：https://stackoverflow.com/questions/35620124/october-cms-create-a-multi-select-form-field

标签

php

html

octobercms