javascript如何在onLoad和onChange上运行相同的函数

我有一个表单，它有许多选择菜单，其中大多数是“是/否”，根据所选的选项，我会显示/隐藏一些高级选项。其中一个选择菜单如下所示：

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

“cbi\U可用的\u id”、：class=>“cbi\U可用的\u class”、：onChange=>“showHideOptions（'cbi\U可用的\u id'、'cbi\U选项\u id'）”、：onLoad=>“showHideOptions（'cbi\U可用的\u id'、'cbi\u选项\u id'）”）”}%>

当我从“是”更改为“否”或相反时，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');

功能显示隐藏选项（selectorId、Options ID）{
if（document.getElementById）{
var选择器=document.getElementById（selectorId）；
var options=document.getElementById（optionId）；
如果（selector.value=='Yes'）{
options.style.display='block'；
返回false；
}否则{
options.style.display='none'；
返回false；
}
}
window.onLoad=showHideOptions（'cbi\U可用\U id'，'cbi\U选项\U id'）；

当您收到来自远程服务器的回发，而您的响应没有

…yourfunction（）…

时，可能会发生这种情况

每次收到新的响应时，都应该发送脚本并对其进行验证，或者将其附加到html元素approciate事件处理程序中

另一种解决方案是使用jQuery和使用event。此事件将动态附加行为到html。我强烈建议您将jQuery用于live，因为此库是生产环境中使用最多的库之一

编辑

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

函数showHideOptions（id1、id2）{
//你的代码
}
$（文档）.ready（函数（）{
//此函数等待DOM加载
//第一次执行您的函数
showHideOptions（'cbi\U可用\U id'、'cbi\U选项\U id'）；
//您必须修改此选择器或向我们显示生成的html
//为此选择最佳选择器
$（'.cbi_可用_类'）.live（'change'，function（）{
//这将触发html class=“cbi\u available\u class”的更改事件
showHideOptions（'cbi\U可用\U id'、'cbi\U选项\U id'）；
});
});

---

这是：

对
不
​​​​​
函数getOption（）{
警报（“foo”）；
}
var select=document.getElementById（'testSelect'）；
select.onchange=getOption；
window.onload=getOption；

---

​

我不明白。当表单为（re）时会调用Onload已加载。您期望的是什么？在我的例子中，：CBIAvailable='No'，因此我希望在重新加载表单时执行showHideOptions函数，它应该显示'No'的相关选项，但实际上表单会重新加载'Yes'选项。当我将选择菜单更改为'No'时，它工作正常，当我将其更改回'No'时，它的工作方式与w相同问题是它没有在加载时显示正确的选项。谢谢r.piesnikowski。我有函数showHideOptions（selectorId，optionId）{…}你能帮我看一个使用/live（）的示例jQuery脚本吗？请注意jQuery live（）在JQuery 1.7中被弃用，并从1.9中删除。感谢Joseph。我用您建议的更改更新了上面的问题，但在重新加载表单时它仍然不起作用。当我将所选选项从“是”更改为“否”或相反时，它仍然起作用。仍然不起作用。事实上，使用原始语法，函数确实会启动加载（我通过在函数中添加document.wrtie进行了测试），但它不会像我选择“是”或“否”时那样执行其余操作。感谢Joseph的努力。非常感谢。您的演示确实有效，我希望我的脚本也能这样工作，但我的if（selector.value='Yes'）上面的测试在加载时仍然失败，即使它在更改我添加的alert（selectorId）；alert（selector.value）后工作正常；在我的脚本开始时，它们都会触发onChange，但只有第一个会触发onLoad。非常奇怪！我终于找到了解决问题的方法。我必须将window.onLoad行放在文件底部的一个部分中，在表单之后。我想这样window.onLoad会在表单加载后执行，因此工作正常。当window.onload位于文件顶部的一个部分中，document.getElementById（selectorId）指向null，因此没有可测试的值。

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)

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