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>

当我从“是”更改为“否”或相反时，会正确调用 showHideOptions javascript 函数，但是当我重新加载表单时无法调用该函数。

谁能告诉我我做错了什么？

谢谢

更新

<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

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;

​

Answer 2

当您从远程服务器收到回发并且您的响应没有<script type="javascript">... yourfunction()...</script> 时，可能会发生这种情况。

每次收到新响应时，您都应该发送脚本并执行它或附加到您的 html 元素相应的事件处理程序。

另一种解决方案是使用 jQuery 并使用 .live() 事件。此事件将动态行为附加到您的 html。 我强烈建议您在 live 中使用 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>