Javascript Wie man die gleiche Funktion onLoad und onChange

Question

Ich habe ein Formular, das viele ausgewählte Menüs hat, die meisten von ihnen sind Ja/Nein und je nach der ausgewählten Option, zeige ich/verstecken einige erweiterte Optionen. Eines des Auswahlmenüs ist die folgende:

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

Wenn ich von ‚Ja‘ auf ‚Nein‘ oder das Gegenteil, showHideOptions ändern JavaScript-Funktionen richtig genannt werden, aber ich kann nicht diese Funktion muss aufgerufen werden, wenn Ich lade das Formular neu.

Jeder kann mir sagen, was mache ich falsch?

Dank

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

Dies könnte passieren, wenn Sie Postbacks von der Remote-Server und Ihre Antwort erhalten hat nicht <script type="javascript">... yourfunction()...</script>.

Jedes Mal, wenn Sie neue Antwort erhalten, sollten Sie Skript senden und exacute oder append an Ihre HTML-Element approciate Event-Handler.

Eine andere Lösung ist, jQuery zu verwenden und .live() Ereignis zu verwenden. Dieses Ereignis fügt Ihrem HTML dynamisch Verhalten hinzu. Ich empfehle dringend, jQuery mit Live zu verwenden, da diese Bibliothek eine der am häufigsten verwendeten Bibliotheken in der Produktionsumgebung ist.

bearbeiten

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

---

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