1

我正在研究 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'
                    )
            ));

请注意，选择字段是在控制器类上填充的！

这是我的 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 ;
    } 
}

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

4

1 回答 1

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 及更早版本不支持标签的 disabled 属性。
（http://www.w3schools.com/tags/att_option_disabled.asp）

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

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

（未经测试）

文档

于 2013-08-07T16:20:00.477 回答