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

2019-11-23 00:37:02 阅读：234 来源： 互联网

标签：ajax zend-framework2 zend-form javascript

我正在使用Zend Framework2,并且在设置Zend的2依赖下拉列表时遇到一些困难,因此当我选择类别时,系统会使用适当的数据填充第二个select元素.我知道我们使用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());

因此,如何在categ_event的change事件上使用Ajax填充第二个select元素.

谢谢！

解决方法:

希望我能正确理解您的关注：

>您有两个选择字段
>选择字段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');
});

最后一行s2.find()可以在您使用dependantOptions时进行更多优化,但我不知道现在该如何工作……

此外,您可能更喜欢display：none / inline,而不是使用visible：hidden / visible

标签：ajax,zend-framework2,zend-form,javascript
来源： https://codeday.me/bug/20191122/2063711.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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