CODEWITHSUNDEEP
javascriptajaxzend-framework2zend-form
blackbishop
blackbishop

Reputation: 32700

ZF2- How to set Dependent Dropdown using Ajax on Zend Form

I'm using Zend Framework2, and i have some difficulties to set 2 dependent dropdown on my Zend from, so that when i select a category, the system fills the second select element with the appropriate data. I know that we use Ajax to do that but i have no idea how to proceed.

My form looks like this :

$this->add(array(
            'type' => 'Zend\Form\Element\Select',
            'name' => 'categ_event',
            'options' => array(
                    'label' => 'Event category ',
                    'style' => 'display:none;',
                    'value_options' => array(
                                                ),
            ),

    ));

    $this->add(array(
            'type' => 'Zend\Form\Element\Select',
            'name' => 'type_incident',
            'options' => array(
                    'label' => 'Incident type',
                    'style' => 'display:none;',
                    'value_options' => array(
                                                ),
            )));

Note that i fill my elements on the controller class. This is the code :

$form->get('categ_event')->setValueOptions(
                $this->getTableInstance('CategEventTable')
                ->getListCateg());
        $form->get('type_incident')->setValueOptions(
                $this->getTableInstance('TypeIncidentTable')
                ->getListTypeIncident());

So how can i use Ajax to fill the second select element on change event of categ_event.

Thanks !

Upvotes: 3

Views: 3161

Answers (1)

Sam
Sam

Reputation: 16455

I hope i understand your concern correctly:

  • You have two select fields
  • Select Field 1 contains several Categories
  • Select Field 2 should contain Data, dependant on what SF1 has selected

Given the abovementioned circumstances, I'll present my solution to you. The secret lies in how you render the select elements, basically you want an output similar to this:

<select id="category-list">
    <option value="1">Foo</option>
    <option value="2">Hello</option>
</select>

<select id="dependant-list">
    <option value="1" data-category="1">Bar</option>
    <option value="2" data-category="1">Baz</option>
    <option value="3" data-category="2">World</option>
    <option value="4" data-category="2">User</option>
</select>

You'd render those pretty much manually. Then comes the simple JQuery stuff:

var s1 = $('#category-list');
var s2 = $('#dependant-list');

//Hide all of Select List 2
var dependantOptions = s2.find('option');
    dependantOptions.css('visibility', 'hidden');

s1.on('change', function() {
    dependantOptions.css('visibility', 'hidden');
    s2.find("option[data-category='" + $(this).val() + "']").css('visibility', 'visible');
});

The last line s2.find() maybe could be optimized more when you use the dependantOptions, but I don't know at the top of my head how that would work right now...

Furthermore, instead of using visibility:hidden/visible you may prefer display:none/inline

Upvotes: 3

Related Questions