我使用的是 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(
),
)));
请注意,我在 Controller 类中填充了我的元素。这是代码:
$form->get('categ_event')->setValueOptions(
$this->getTableInstance('CategEventTable')
->getListCateg());
$form->get('type_incident')->setValueOptions(
$this->getTableInstance('TypeIncidentTable')
->getListTypeIncident());
那么我如何使用 Ajax 在 categ_event 的更改事件中填充第二个选择元素。
谢谢!
最佳答案
希望我能正确理解您的担忧:
- 您有两个选择字段
- 选择Field 1 contains several Categories
- 选择字段 2 应包含数据,具体取决于 SF1 选择的内容
鉴于上述情况,我将向您展示我的解决方案。 secret 在于您如何呈现选择元素,基本上您想要类似于这样的输出:
<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
关于javascript - ZF2- 如何在 Zend Form 上使用 Ajax 设置依赖下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18076294/