我有一个包含许多选择菜单的表单,其中大多数是Yes / No,并且根据所选选项,我显示/隐藏一些高级选项。其中一个选择菜单如下:
<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');
答案 0 :(得分: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;
答案 1 :(得分:0)
当您收到远程服务器的回发且您的回复没有<script type="javascript">... yourfunction()...</script>
时,可能会发生这种情况。
每次获得新响应时,您都应该发送脚本并将其发送或附加到您的html元素approciate事件处理程序。
另一个解决方案是使用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>