JavaScript 在 Zend 和 jQuery 移动

Question

我正在使用 jQuery Mobile 在 ZF1 中开发应用程序。我有一个表格（片段）：

$options = array('Employee', 'Supervisor', 'Other');
$form1->addElement('select', 'role', array('multioptions' => $options);
$form1->role->setAttribs(array('onchange', 'showHide()'));
$form2->addElement('text', 'position');

我有一个脚本：

function showHide(){
    var hide = false;
    if(document.getElementById("form1-role").value === "Employee" ||
       document.getElementById("form1-role").value === "Supervisor") {
        hide = false;
    } else {
        hide = true;
    }

    var i;
    var elements = [
        "form2-position-label",
        "form2-position-element"
    ];

    for(i = 0; i < elements.length; i++) {
        if(document.getElementById(elements[i]) !== null) {
            document.getElementById(elements[i]).hidden = hide;
        }
    }
}

想法是 - 当用户从列表中选择 'Other' 时，文本框 'position' 应该隐藏。否则它应该是可见的。一切正常，直到表单验证 returns false - 然后出现验证器消息并且脚本停止工作。有趣的是 - 当我将 alert("hello"); 放入脚本时，它确实显示了警报但仍然没有隐藏文本框。

Answer 1

您可以删除您的 $form1->role->setAttribs(array('onchange', 'showHide()')); 并使用它（反正您在页面上看到 jQuery）。

$(function(){
    $('#form1-role').on('change', function(){
        var role = $(this).val();

        $('#form2-position-label, #form2-position-element')
            .toggleClass('hidden', role !== 'Employee' && role !== 'Supervisor');
    });
});

这会在目标元素上切换 class。所以 CSS 很简单：

.hidden {
    display: none;
}

如果您也希望它在页面呈现上激活（即，如果要显示错误消息），您可以将 .change(); 放在 on 调用的末尾。

$(function(){
    $('#form1-role').on('change', function(){
        var role = $(this).val();

        $('#form2-position-label, #form2-position-element')
        .toggleClass('hidden', role !== 'Employee' && role !== 'Supervisor');
    }).change();
});

一旦页面呈现并执行处理程序中的逻辑，这将触发 change 事件。

JavaScript 在 Zend 和 jQuery 移动

JavaScript in Zend and jQuery Mobile

javascript

validation

mobile

jquery

zend-framework