Question

我有一个关于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无效。然而，在第二，第三等等，似乎工作得非常好。

感谢您抽出宝贵时间阅读我的问题。

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

}


}

Javascript OnChange不会在第一次更改时触发

2 个答案: