Select Fields

---

Other Select Fields

You may actually want to use one of the following MultiSelectField, BelongsToField, HasOneField, HasManyField, BelongsToManyField, OrderableBelongsToManyField as these all extend SelectField with extra functionality.

Options

You can use the setOptions method to set an array that will be passed to vue-multiselect.

Note that the index of the array is what will be stored in the database and the values are used as labels.

E.g.

(new SelectField('my_simple_select'))
    ->setOptions([
        0 => 'Foo',
        1 => 'Bar',
        2 => 'Baz',
    ]),

Or:

(new SelectField('my_simple_select'))
    ->setOptions([
        'foo' => 'Foo',
        'bar' => 'Bar',
        'baz' => 'Baz',
    ]),

You might want to pass in a list of

(new SelectField('my_thing_lookup'))
    ->setOptions(Thing::orderBy('name', 'ASC')->select('name', 'id')->get()->pluck('name', 'id')->toArray()),

This would store the id. If you are doing this, you might want to use a relation ship field instead (see above).

Option Groups

You may wish to split your Options into groups. Acheiving this requires two steps. Firstly, set some additional settings.

->setSettings([
    'group_label'     => 'group',
    'group_value'     => 'group_options',
])

group_label refers to the array key of an item that will be used as a label for the group. group_value refers to the array key of an array of options that should be in the group.

Then you will have to provide your options in a new format, using the group_label and group_value that you have specified

->setOptions([
    [
        'group' => 'Test Group 1',
        'group_options' => [
            [
                'id' => 1,
                'name' => 'Test 1',
            ],
            [
                'id' => 2,
                'name' => 'Test 2',
            ],
        ],
    ],
    [
        'group' => 'Test Group 2',
        'group_options' => [
            [
                'id' => 3,
                'name' => 'Test 3',
            ],
            [
                'id' => 4,
                'name' => 'Test 4',
            ],
        ],
    ],
]);

Ajax

You can enable Ajax lookups by using the useAjax($route, $callback) method.

$route should be the URL that will be used to lookup results. This URL should return a JSON array of objects with index and label attribute that match those used in the field's settings.

$callback is a way of manipulating the found data. For most cases you can just supply the class name. For more control you can pass any type of callable. This allows you to return any data you like, in any order you like.

Example

->useAjax('admin/users/search/', User::class)

Settings

Setting some options is now deprecated.

• Instead of setting 'multiple' directly, use a different field type, e.g. MultiSelectField
• Instead of setting 'ajax_url' directly, call useAjax() instead