Javascript OnChange不在第一次更改時觸發

Question

我在選擇html元素中遇到有關“ onchange”事件的問題。 我編寫的代碼應該顯示某些文本框，具體取決於選擇了哪個選擇選項。

我的代碼如下：

Customer Type: 
<select name="customerType" onchange="cust_type()">
<option value="" selected>Customer Type?</option>
<option value="nonCorp">Customer</option>
<option value="corp">Corporate</option>
</select>

JS：

function cust_type() {  
   var select_drop = document.getElementsByName('customerType');
   var selected = select_drop[0].value;
   var f_name = document.getElementById('forename');
   var s_name = document.getElementById('surname');
   var c_name = document.getElementById('companyName');

   if(selected == "") {     
     f_name.style.visibility = 'hidden';
     s_name.style.visibility = 'hidden';
     c_name.style.visibility = 'hidden';            
     f_name.value = "";
     s_name.value = "";
     c_name.value = ""; 
   }    
   if(selected == "nonCorp") {      
         f_name.style.visibility = 'visible';
         s_name.style.visibility = 'visible';
     c_name.style.visibility = 'hidden';        
     c_name.value = ""; 
   }    
   if(selected == "corp") {     
     f_name.style.visibility = 'hidden';
     s_name.style.visibility = 'hidden';
     c_name.style.visibility = 'visible';       
     f_name.value = "";
     s_name.value = ""; 
   }
}

我遇到的問題是，當我第一次更改選擇菜單中的選項時，onchange無效。 但是在第二，第三等上，它似乎工作得很好。

感謝您抽出寶貴時間閱讀我的問題。

Answer 1

您是否嘗試在JavaScript中添加事件？

var yourSelectElement = document.getElementById('test');
yourSelectElement.onchange = cust_type;

讓我們看看： http : //jsfiddle.net/YtuxP/

你嘗試這樣做嗎？

Answer 2

固定：

我沒有直接更改文本框的可見性，而是將它們包裝在單獨的div中。 代碼解決方案如下。

HTML：

Customer Type: 
<select name="customerType" onchange="cust_type()">
<option value="" selected>Customer Type?</option>
<option value="nonCorp">Customer</option>
<option value="corp">Corporate</option>
</select>   

<div id="nonCorpCustDetails" class="custDetails" style="visibility:hidden">

    Forename <input type="text" name="forename" id="forename" onchange="submit_check()" />
Surname <input type="text" name="surname" id="surname" onchange="submit_check()" /.

</div>

<div id="corporateCustDetails" class="custDetails" style="visibility:hidden">

Company Name <input type="text" name="companyName" id="companyName" onchange="submit_check()" />

</div>

JS功能：

function cust_type() {

var select_drop = document.getElementsByName('customerType');
var selected = select_drop[0].value;
var f_name = document.getElementById('forename');
var s_name = document.getElementById('surname');
var c_name = document.getElementById('companyName');
var nonCorp = document.getElementById('nonCorpCustDetails');
var corp = document.getElementById('corporateCustDetails');


if(selected == "") {

        nonCorp.style.visibility = 'hidden';
    corp.style.visibility = 'hidden';

    f_name.value = "";
        s_name.value = "";
    c_name.value = "";

}

if(selected == "nonCorp") {

    nonCorp.style.visibility = 'visible';
    corp.style.visibility = 'hidden';

    c_name.value = "";

}

if(selected == "corp") {

    nonCorp.style.visibility = 'hidden';
        corp.style.visibility = 'visible';

    f_name.value = "";
    s_name.value = "";

}


}