Dynamic select box/multiselect box based on other field

In the class definition, I have two select boxes, first select box has 5 items if I select any item from the first select box, the value of the second select box should get change.

Try to make custom combobox(Select BOX) using EXT JS and onChange Event Get The data for another combobox then save those datas in database.

Hi, do you know if some example on this topic is available?

I would like to see how to do this as well. Right now for my use-case, they have to save the object for the second field’s options to appear. I’d like to make it dynamic real-time.

Oh, If you share the link, that would be helpful

Are you asking how I did my implementation? I used an OptionProvider, similar to this:

https://pimcore.com/docs/6.x/Development_Documentation/Objects/Object_Classes/Data_Types/Dynamic_Select_Types.html

The link is for a Dynamic Select Type, but it will work on a regular Select type as well (worked better for my case). I just looked at the value of the first select, and changed the values it passed back depending on the selection of the first. But it does require a save of the object first, which is what I was trying to get past.

I have something like this:

<?php
namespace AppBundle\CoreExtension\Provider;

use Pimcore\Log\ApplicationLogger;
use Pimcore\Model\DataObject\ClassDefinition\DynamicOptionsProvider\SelectOptionsProviderInterface;
use Pimcore\Model\DataObject\Kotel;

class TypyKotluTuvOptionsProvider implements SelectOptionsProviderInterface
{
    public function getOptions($context, $fieldDefinition)
    {
        if (!($context['object'] instanceof Kotel)) {
            return [];
        }

        if ($context['object']->getTyp() == 1) {
            return [
                ['key' => 'S průtokovým ohřevem TUV', 'value' => 2],
                ['key' => 'S připojením na zásobník TUV', 'value' => 3],
                ['key' => 'Se zabudovaným zásobníkem TUV', 'value' => 4],
            ];
        }
        elseif ($context['object']->getTyp() == 2) {*/
            return [
                ['key' => 'Pouze pro topení', 'value' => 1],
                ['key' => 'S průtokovým ohřevem TUV', 'value' => 2],
                ['key' => 'S připojením na zásobník TUV', 'value' => 3],
                ['key' => 'Se zabudovaným zásobníkem TUV', 'value' => 4],
            ];
        }
        elseif ($context['object']->getTyp() == 3) {
            return [
                ['key' => 'S připojením na zásobník TUV', 'value' => 3],
            ];
        }

        return [
            ['key' => 'Neznámý typ kotle', 'value' => 0]
        ];
    }

    public function hasStaticOptions($context, $fieldDefinition)
    {
        return false;
    }

    public function getDefaultValue($context, $fieldDefinition)
    {
        return 0;
    }
}

But it doesn’t work well - I hoped that you will point out some JavaScript solution (currently I’m trying doing this by customizing form after dataobject is opened (MyPlugin.postOpenObject).

And here is (simplified) code that works for me (plugin.js file):

pimcore.registerNS("pimcore.plugin.AppBundle");
pimcore.plugin.AppBundle = Class.create(pimcore.plugin.admin, {

    getClassName: function () {
        return "pimcore.plugin.AppBundle";
    },

    initialize: function () {
        pimcore.plugin.broker.registerPlugin(this);
    },

    postOpenObject: function (object, type) {
        var _ = this;
        if (object.data.general.o_className === 'Kotel' || type === 'object') {
            let cbType = object.edit.getLayout().query('combobox[name=typ]'),
                cbTypeTuv = object.edit.getLayout().query('combobox[name=typtuv]');

            if (cbType.length > 0) {
                cbType[0].on('select', function (cb, m) {
                    let cbTuv = cb.up('panel').query('combobox[name=typtuv]');
                    if (cbTuv.length === 1) {
                        cbTuv[0].setStore(_.getTypetuvStore(m.data.value));
                    }
                });
            }

            if (cbTypeTuv.length > 0) {
                cbTypeTuv[0].setStore(this.getTypetuvStore(object.data.data.typ));
            }
        }
    },

    getTypetuvStore: function (typKotle) {
        // TODO Replace with Ajax call!
        if (typKotle == "1") {
            return Ext.create('Ext.data.Store', {
                fields: ['key', 'value'],
                data : [
                    { 'key': 'S průtokovým ohřevem TUV', 'value': 2 },
                    { 'key': 'S připojením na zásobník TUV', 'value': 3 },
                    { 'key': 'Se zabudovaným zásobníkem TUV', 'value': 4 },
                ]
            });
        }
        else if (typKotle == "2") {
            return Ext.create('Ext.data.Store', {
                fields: ['key', 'value'],
                data : [
                    { 'key': 'Pouze pro topení', 'value': 1 },
                    { 'key': 'S průtokovým ohřevem TUV', 'value': 2 },
                    { 'key': 'S připojením na zásobník TUV', 'value': 3 },
                    { 'key': 'Se zabudovaným zásobníkem TUV', 'value': 4 },
                ]
            });
        }
        else if (typKotle == "3") {
            return Ext.create('Ext.data.Store', {
                fields: ['key', 'value'],
                data : [
                    { 'key': 'S připojením na zásobník TUV', 'value': 3 },
                ]
            });
        }

        return Ext.create('Ext.data.Store', {
            fields: ['key', 'value'],
            data : [
                { 'key': 'Neznámý typ kotle', 'value': 0 }
            ]
        });
    }
});

new pimcore.plugin.AppBundle();

UPDATED:

This is better solution (this is with Ajax but there are more proxies - https://docs.sencha.com/extjs/5.0.0/api/Ext.data.proxy.Proxy.html):

pimcore.registerNS("AppBundle");
AppBundle = Class.create(pimcore.plugin.admin, {
    getClassName: function () {
        return "AppBundle";
    },
    initialize: function () {
        pimcore.plugin.broker.registerPlugin(this);
        this.initializeStores();
    },
    initializeStores: function () {
        Ext.define('ModelTypeTuv', {
            extend: 'Ext.data.Model',
            fields: [
                { name: 'key', type: 'string' },
                { name: 'value', type: 'int' }
            ]
        });
        this._tuvTypesStore = Ext.create('Ext.data.Store', {
            model: 'ModelTypeTuv',
            proxy: {
                type: 'ajax',
                url: '/admin/store/typtuv/',
                reader: { type: 'json', rootProperty: 'data' }
            }
        });
    },
    pimcoreReady: function () {
    },
    postOpenObject: function (object, type) {
        var _ = this;
        if (object.data.general.o_className === 'Kotel' && type === 'object') {
            let cbType = object.edit.getLayout().query('combobox[name=typ]'),
                cbTypeTuv = object.edit.getLayout().query('combobox[name=typtuv]');

            if (cbType.length > 0) {
                cbType[0].on( 'select', (cb, m) => {
                    _._tuvTypesStore.load({ params: { page: m.data.value } });
                });
            }

            if (cbTypeTuv.length > 0) {
                this._tuvTypesStore.load({ params: { page: 0 } });
                cbTypeTuv[0].setStore(this._tuvTypesStore);
            }
        }
    }
});
new AppBundle();