ZF2-如何在 Zend Form 上使用 Ajax 设置依赖下拉列表

Question

我正在使用 Zend Framework2，在我的 Zend from 上设置 2 个依赖下拉菜单时遇到了一些困难，因此当我选择一个类别时，系统会用适当的数据填充第二个选择元素。我知道我们使用 Ajax 来做到这一点，但我不知道如何进行。

我的表单如下所示：

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

请注意，我在控制器类中填充了我的元素。这是代码：

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

那么我如何使用 Ajax 填充categ_event 更改事件的第二个选择元素。

谢谢！

Answer 1

希望我能正确理解您的担忧：

• 您有两个选择字段
• 选择字段 1 包含多个类别
• 选择字段 2 应包含数据，具体取决于 SF1 选择的内容

鉴于上述情况，我将向您介绍我的解决方案。秘诀在于你如何渲染选择元素，基本上你想要一个类似这样的输出：

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

您几乎可以手动渲染这些内容。然后是简单的 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');
});

当您使用 dependantOptions 时，最后一行 s2.find() 可能会得到更多优化，但我不知道现在它会如何工作......

此外，您可能更喜欢display:none/inline，而不是visibility:hidden/visible