Javascript OnChange 未在第一次更改时触发答案

【问题标题】：Javascript OnChange not firing on first changeJavascript OnChange 未在第一次更改时触发
【发布时间】：2014-04-08 13:54:36
【问题描述】：

我有一个关于 select 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没有效果。然而，在第二个、第三个等上，它似乎工作得很好。

感谢您花时间阅读我的问题。

【问题讨论】：

在初始更改时，您实际上是否更改了最初的值？
您的 onchange 事件的其余部分在哪里？我在您的代码中没有看到它。
是的。例如，我会将其从“客户类型？”致“客户”或“公司”@DanielJohnson
你是什么意思@the_pete
您是否尝试过类似的方法：yourSelectElement.onchange = cust_type;

标签： javascript html

【解决方案1】：

您是否尝试在 JavaScript 中添加事件？

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

让我们看看：http://jsfiddle.net/YtuxP/

你会尝试这样做吗？

【讨论】：

不，我没有。我现在已经解决了这个问题，我正要发布修复程序。还是谢谢。

【解决方案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 = "";

}


}

【讨论】：