在保管箱中更改选项时更改div的可见性

Wakasa Yuuri 发表于 Dev

若狭友利

我的php中有这样的代码：

<section id="placeOrder">
<h2>Place order</h2>
Your details
Customer Type: 
<select name="customerType">
    <option value="">Customer Type?</option>
    <option value="ret">Customer</option>
    <option value="trd">Trade</option>
</select>

这些是必须根据所选选项更改可见性的div：

<div id="retCustDetails" class="custDetails">
    Forename <input type="text" name="forename" id="forename" />
    Surname <input type="text" name="surname" id="surname" />
</div>
<div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
    Company Name <input type="text" name="companyName" id="companyName" />
</div>

我试过这个javascript：

<script>
document.getElementsByName("customerType").onchange = function () {
    var val = this.options[this.selectedIndex].value;
    document.getElementById("tradeCustDetails").style.visibility = (val == "trd") ? "visible" : "hidden";
    document.getElementById("retCustDetails").style.visibility = (val == "trd") ? "hidden" : "visible";
};
</script>

但是divtradecustdetails"没有出现，并且divretCustDetails仍然在那。

有人可以帮忙吗？

Severino Lorilla Jr.

更新了脚本，这应该可以正常工作。

<script>
     function jsFunction() {
         var val =  document.getElementById("dropSelect").options[document.getElementById("dropSelect").selectedIndex].value;
         document.getElementById("tradeCustDetails").style.visibility = (val == "trd") ? "visible" : "hidden";
         document.getElementById("retCustDetails").style.visibility = (val == "trd") ? "hidden" : "visible";
     }
</script>

同时更新您的下拉HTML。

<select id="dropSelect" name="customerType" onchange="jsFunction()">

编辑＃1：使用getElementsByName（）

function jsFunction() {
     var val =  document.getElementsByName("customerType")[0];
     val = val.options[val.selectedIndex].value;                    
     document.getElementById("tradeCustDetails").style.visibility = (val == "trd") ? "visible" : "hidden";
     document.getElementById("retCustDetails").style.visibility = (val == "trd") ? "hidden" : "visible";
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。