Question

一旦我选择了其中一个选项，我就有问题显示我隐藏的div。目前我已经为它完成了javascript代码。

这是我的HTML代码：

Customer Type:
<select name="customerType">
    <option value="">Customer Type?</option>
    <option value="ret" onClick="custType(this.value)">Customer</option>
    <option value="trd" onClick="custType(this.value)">Trade</option>
</select>
<div id="tradeCustDetails" class="custDetails" style="visibility:hidden">Company Name
    <input type="text" name="companyName" id="companyName" />
</div>

这是我目前的Javascript代码：

function custType(val) {
    if (val == "trd") {
        document.getElementById("tradeCustDetails").style.visibility = "visible";
        document.getElementById("retCustDetails").style.visibility = "hidden";
    }

    if (val == "ret") {
        document.getElementById("tradeCustDetails").style.visibility = "hidden";
        document.getElementById("retCustDetails").style.visibility = "visible";
    }
}

我通过stackoverflow进行了一些研究，并通过JSFiddle找到了解决方案，但该代码无法处理我的文件。任何人都可以帮我解决这个问题。谢谢。

Answer 1

您可以使用onchange事件，例如

function custType(val){
    document.getElementById("tradeCustDetails").style.visibility =val == "trd" ? "visible": 'hidden';
    document.getElementById("retCustDetails").style.visibility =val == "ret" ? "visible": 'hidden';
}

演示：Fiddle

Answer 2

你的代码对我有用。但是....我想你也忘了创建第二个div，或者你不只是将它包含在你的问题中。我在onlinehtmleditor上尝试了这个并且它运行得很好。我刚刚创建了第二个div：

id=retCustDetails

Answer 3

我找到了问题的答案。我只需要将onclick更改为onchange。它现在工作正常。谢谢你回答我的问题

选择一个选项后，无法显示隐藏的div

3 个答案: