javascript - ZF2- Cómo configurar Dropdown dependiente usando Ajax en Zend Form

zend-framework2 zend-form

Question

Estoy usando Zend Framework2, y tengo algunas dificultades para configurar 2 dropdown dependientes en mi Zend, de modo que cuando selecciono una categoría, el sistema llena el segundo elemento de selección con los datos apropiados. Sé que usamos Ajax para hacer eso, pero no tengo idea de cómo proceder.

Mi formulario se ve así:

$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(
                                                ),
            )));

Tenga en cuenta que llene mis elementos en la clase de controlador. Este es el código:

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

Entonces, ¿cómo puedo usar Ajax para completar el segundo elemento de selección en el evento de cambio de categ_event?

Gracias !

Answer 1

Espero que entienda tu preocupación correctamente:

• Tienes dos campos seleccionados
• Seleccionar campo 1 contiene varias categorías
• Seleccionar el campo 2 debe contener datos, dependiendo de lo que SF1 haya seleccionado

Dadas las circunstancias mencionadas, le presentaré mi solución. El secreto reside en cómo renderizar los elementos seleccionados, básicamente quieres un resultado similar al siguiente:

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

Los renderizarías prácticamente de forma manual. Luego viene lo simple de JQuery:

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'');
});

La última línea s2.find() podría optimizarse más cuando use dependantOptions , pero no sé en lo más s2.find() cómo eso funcionaría ahora ...

Además, en lugar de usar visibility:hidden/visible , puede preferir display:none/inline