Question

我对JavaScript并不熟悉。我到目前为止所做的是隐藏表单的一部分（见下文：＆＃34; Memo＆＃34;），当有人通过onchange更改输入文本字段时（字段名称：＆＃34; ordernumber＆＃ 34。）

因此，我正在使用这个功能：

<script language="JavaScript" type="text/javascript">
function takeawayfield()
{   dok=0;
if (document.getElementById("ordernumber").changed == true) dok=1
if (dok==0)
{document.getElementById("Memo").style.display = "none";}
else
{document.getElementById("Meno").style.display = "inline";}
}
</script>

这很好用，但现在我想从下拉列表中添加另一个条件（选择选项）。换句话说：当您更改ordernumber并选择某个选项时，＆＃34; Memo＆＃34;应该消失。我尝试了很多，但我不能让它正常工作。这是我最近的尝试：

function takeawayfield()
{   dok=0;
if (document.getElementById("ordernumber").changed == true && document.getElementById("system").value == "sys1") dok=1
if (dok==0)
{document.getElementById("Memo").style.display = "none";}
else
{document.getElementById("Memo").style.display = "inline";}

有两件事情不合适：当只有一个条件成立时它会执行（虽然我使用＆amp;＆amp;）并且看起来与选择下拉列表中的哪个选项无关。现在它可以执行每个选项，但它只能用＆＃34; sys1＆＃34;。

执行

BTW：我添加了onchange =＆＃34; javascript：takeawayfield（）＆＃34;两个受影响的表单元素（输入文本和选择选项）。我想那是对的吗？

我做错了什么？

提前致谢！

编辑：

以下是html标签：

<input type="text" name="ordernumber" id="ordernumber" value="<?php echo htmlspecialchars($ordernumber); ?>" onchange="javascript:takeawayfield()">

<select name="system" id="system" onchange="javascript:takeawayfield()"> <option value="sys1">System 1</option> <option value="sys2">System 2</option> <option value="sys3">System 3</option> </select>

Answer 1

试试这个：

var dok = 0,
    initialValue = "",
    ordernumber = null,
    system = null,
    memo = null;

window.onload = function() {
    // get dom objects
    ordernumber = document.getElementById("ordernumber");
    system = document.getElementById("system");
    memo = document.getElementById("Memo");

    // set initial value
    initialValue = ordernumber.value;
};

function takeawayfield() {
    if (ordernumber.value != initialValue && system.value == "sys1") {
        dok = 0;
        memo.style.display = "none";
    } else {
        dok = 1;
        memo.style.display = "inline";
    }
};

<强> jsFiddle

Answer 2

如果你的下拉列表（选择/选项）在选项标签中有值，那么下面的代码应该可以正常工作。（在用户选择之后）

例如选择：

  <select id="system">
     <option value="sys1">system 1</option>
  </select>

您的代码


    document.getElementById("system").value == "sys1"

或者您更改了代码：


    if (document.getElementById("ordernumber").changed == true) dok=1;
    else dok=0;
    if (document.getElementById("system").value == "sys1") dok=1
    else dok=0;

Answer 3

如果您想在页面加载后对用户的更改作出反应，您可以收听输入框的键盘事件和下拉列表。

以下是一个例子：

window.onload = function() {
    document.getElementById("ordernumber").addEventListener('keyup', takeawayfield, false);
    document.getElementById("system").addEventListener('change', takeawayfield, false);

    function takeawayfield()
    {   
        if (document.getElementById("system").value == "sys1") {
            toggleMemo(false);
        }
        else {
            toggleMemo(true);
        }
    }

    function toggleMemo(show) {
        var memo = document.getElementById("Memo");
        if (show) {
            memo.style.display = "inline";
        }
        else {
            memo.style.display = "none";
        }
    }
};

http://jsfiddle.net/je5a7/

由于两个条件，使用JS隐藏元素

3 个答案: