javascript - ZF2-无法隐藏 Zend\Element\Select 上的选择选项

Question

我正在开发 ZF2，我正在尝试使用 JavaScript 设置两个依赖的下拉菜单。我开始尝试在更改第一个选择字段时隐藏第二个选择字段中的所有选项。

这是我的表格:

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

            'attributes'=> array(
                    'id'=>'list1',
                    'onchange'=>'hide()'
            )
    ));

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

请注意，选择字段已填充在 Controller 类上!

这是我的 Javascript 函数:

function hide()
    {
    var op = document.getElementById("list2").getElementsByTagName("option");
    for (var i = 0; i < op.length; i++) {

        ? op[i].disabled = true 
        : op[i].disabled = false ;
    } 
}

但是当第一个选择字段更改时，什么也没有发生。那么问题出在哪里呢？

Answer 1

您的代码应该抛出语法错误。三元运算符 (?:) 需要一个条件来检查。请参阅:http://en.wikipedia.org/wiki/%3F:#JavaScript

(condition) ? alert('true') : alert('false');

正如 Fouad Fodail 建议的那样 -> 一个 jQuery 示例:

function hide()
{
    $('#list2 option').each(function() {
        $(this).prop('disabled', condition);
                             // ^-- Do not forget to change this
    });
}

注意: Internet Explorer 7 及更早版本不支持标记的禁用属性。
(http://www.w3schools.com/tags/att_option_disabled.asp)

另一个例子，这将禁用第二个 <select id="select2"> ，如果第一个<select id="select1">已更改:

$('#select1').change(function() {
    $('#select2').prop('disabled', true);
});

(未经测试)

文档

• http://api.jquery.com/change/
• http://api.jquery.com/each/
• http://api.jquery.com/prop/