değiştir görünürlük seçeneği benim php içi şöyle kodları var

Question

dropbox'a içine değiştirildiğinde:

<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> 

ve bu görünürlük belirtilen seçeneğe göre değiştirilmelidir olan birer bölümdür:

<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> 

bu javascript çalıştı:

<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> 

Ama div tradecustdetails" görünmüyor ve div retCustDetails hala orada.

Herkes yardımcı olabilir mi?

Answer 1

Komut dosyanız güncellendi, bu işe yaramalı.

<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> 

Açılan HTML'nizi de güncelleyin.

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

DÜZENLEME # 1: getElementsByName kullanarak()

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"; 
} 

Answer 2

getElementsByName() belirtilen adla belgedeki tüm unsurların bir koleksiyon döndürür. Dolayısıyla böyle içlerinden döngü vardır:

var x = document.getElementsByName("customerType"); 
for (var i = 0; i < x.length; i++) { 
    // do something with x[i] 
} 

yalnızca bir seçme elemanı kullanıyorsanız, o zaman böyle getElementById() kullanmak daha iyidir:

HTML

<select id="customerType" name="customerType"> 
    <option value="">Customer Type?</option> 
    <option value="ret">Customer</option> 
    <option value="trd">Trade</option> 
</select> 

Komut Dosyası

document.getElementById("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"; 
};