JavaScript如何運行onLoad和onChange相同的功能

Question

我有一個窗體有很多選擇菜單，其中大多數是/否，並根據選定的選項，我顯示/隱藏一些高級選項。其中一個選擇菜單如下：

<td><%= f.select :CBIAvailable, ['Yes' , 'No'],{}, {:id=>"cbi_available_id", :class=>"cbi_available_class", :onChange=>"showHideOptions('cbi_available_id','cbi_options_id')", :onLoad=>"showHideOptions('cbi_available_id','cbi_options_id')"} %></td> 

當我從「有」到「無」或者相反，JavaScript函數將被正常調用showHideOptions改變，但我不能有函數被調用時，我重新加載表單。

任何人都可以告訴我我東錯了什麼？

感謝

UPDATE

<script language="javascript" type="text/javascript"> 
function showHideOptions(selectorId,optionsId) { 
    if (document.getElementById) { 
    var selector = document.getElementById(selectorId); 
    var options = document.getElementById(optionsId); 
    if (selector.value == 'Yes') { 
     options.style.display = 'block'; 
     return false; 
    } else { 
     options.style.display = 'none'; 
     return false; 
    } 
} 

window.onLoad = showHideOptions('cbi_available_id','cbi_options_id'); 

Answer 1

當你從遠程服務器接收和回傳你的迴應沒有<script type="javascript">... yourfunction()...</script>這可能發生。

每次獲得新的回覆時，您都應該發送腳本並將其取消或追加到您的html元素認可事件處理程序中。

另一個解決方案是使用jQuery並使用.live()事件。此事件將動態行爲附加到您的html。 我強烈建議你使用jQuery，因爲這個庫是生產環境中最常用的庫之一。

編輯

<script type="text/javascript" src="path_to_jquery.js"></script> 
<script type="text/javascript"> 
function showHideOptions(id1,id2){ 
    //Your code 
} 
$(document).ready(function() { 
    //This function waits for DOM load 
    //execute your function for first time 
    showHideOptions('cbi_available_id','cbi_options_id'); 
    //This selector you have to modify or show us generated html to 
    // choose the best selector for this purpose 
    $('.cbi_available_class').live('change',function(){ 
     //This will fire change event of html class="cbi_available_class" 
     showHideOptions('cbi_available_id','cbi_options_id'); 
    }); 
}); 
</script> 

Answer 2

function yourFunction(){ 

    //get that select element and evaluate value 
    //do you change stuff here 
} 

window.onload = yourFunction; //this gets fired on load 

//"select" is your element, 
//fetched by methods like document.getElementById(); 

select.onchange = yourFunction; //this gets fired on change 

//you can also use attachEvent (IE) or addEventListener (Others) 

---

這裏是a working demo：

<select id="testSelect"> 
    <option value="yes">YES</option> 
    <option value="no">NO</option> 
</select>​​​​​ 

function getOption() { 
    alert('foo'); 
} 

var select = document.getElementById('testSelect'); 
select.onchange = getOption; 
window.onload = getOption;