javascript代码适用于mozilla和chrome，但不适用于IE
[英]javascript code works in mozilla and chrome but not in IE
问题描述
My script code: 
我的脚本代码：
function trigonchange(){
select_id =$("#trig_method").value;
if(select_id == "script") {
$("#one").css("visibilty","visible");
$("#a").css("visibilty","visible");
$("#three").css("visibilty","visible");
$("#threea").css("visibilty","visible");
$("#threeb").css("visibilty","visible");
$("#two").css("visibilty","hidden");
$("#four").css("visibilty","hidden");
}
else {
$('#two').css("visibility","visible");
$('#four').css("visibilty","visible");
$('#one').css("visibilty","hidden");
$('#a').css("visibilty","hidden");
$('#three').css("visibilty","hidden");
$('#threea').css("visibilty","hidden");
$('#threeb').css("visibilty","hidden");
}
}
HTML HTML
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function) {
$("#trig_method").change(trigonchange());
}
</script>
</head>
<body>
<form action="test_management.cgi" name="input" onsubmit="return(validatefrm());" style="margin-left:0%;" method="POST" enctype="multipart/form-data">
<table cellspacing="10">
<tr><td>Test Case Name</td><td><input type="text" name="tc_id" size="40"></td></tr>
<tr></tr>
<tr></tr><tr></tr>
<tr><td>Category</td><td><select name="category" id="cat">
<option val="server">server</option>
<option val="network">network</option>
<option val="storage">storage</option>
</select></td></tr>
<tr></tr><tr></tr>
<tr></tr><tr></tr>
<tr><td>Sub-Category</td><td><select name="itemdata" id="item">
</select></td></tr>
<tr></tr><tr></tr><tr></tr>
<tr><td>Trigger Method</td><td>
<select name="trig_method" id="trig_method" onchange="trigonchange();this.selectedIndex=this.defaultIndex;" onfocus="this.defaultIndex=this.selectedIndex;">
<option value="cmd">CMD</option>
<option value="script">SCRIPT</option>
</select></td></tr><tr></tr><tr></tr>
<tr id="two">
<td style="width:40%;">Enter the command </td>
<td>
<input class="mg" type="text" size="40" name="cmd">
</td>
</tr>
<tr id="one" style="visibility: hidden;"><td style="width:40%;">Specify a script path</td><td>
<input type="file" id= "script" name="script" size="40"></td></tr>
<tr id="a" style="visibility: hidden;"><td>OR</td></tr>
<tr id="t" style="visibility: hidden;"><td style="width:40%;"> Specify the UNIX path</td><td><input type="text" id="script" size="40"/></td></tr>
<tr id="four"><td style="width:40%;">Please specify the exepected output in case of CMD</td>
<td><textarea name="cmd_verification" cols="30" rows="5" id="ta" ></textarea>
<tr id="three" style="visibility: hidden;"><td style="width:40%;">Specify the Config File </td>
<td><input type="file" siz="40"></td></tr><tr id="threea" style="visibility:hidden;"><td>OR</td></tr>
<tr id="threeb" style="visibility:hidden;"><td style="width:40%;">Specify the Config file unix path</td><td><input type="text" size="40" class="mg"/></td></tr>
<tr></tr><tr><td>Testcase Description</td><td><textarea name="test_description" cols="30" rows="5"></textarea></td></tr><tr></tr><tr></tr>
<tr><td></td><td><input type="submit" id="b" value="Submit"></td></tr>
</table></form>
</body>
I want to display/hide fields onchanging the dropdown(CMD/SCRIPT). 我想在改变下拉列表（CMD / SCRIPT）时显示/隐藏字段。 Its working perfectly on Mozilla and Chrome but not in IE. 它完全适用于Mozilla和Chrome，但不适用于IE。 I have added all of you suggestion and edited the code. 我已经添加了你们所有的建议并编辑了代码。 But still its not working in (now it's not working in any browser) 但它还没有工作（现在它不能在任何浏览器中工作）
3 个解决方案
解决方案1
2 2014-01-21 06:32:50
You can't use the same attribute twice in an element. 您不能在元素中两次使用相同的属性。 If you want to do multiple things in onchange , put them in a single attribute, separated by ; 如果你想在onchange上做多件事，把它们放在一个属性中，用; . 。
<select name="trig_method" id="trig_method" onchange="trigonchange();this.selectedIndex=this.defaultIndex;" onfocus="this.defaultIndex=this.selectedIndex;">
解决方案2
0 2014-01-21 06:35:01
Use "value" instead of "Val" in options. 在选项中使用“value”而不是“Val”。 Compare with the value in options. 与选项中的值进行比较。 That is cmd instead of CMD. 这是cmd而不是CMD。
解决方案3
0 2014-01-21 06:56:18
It might be worth noting that onChange doesn't play well with IE 7/8. 值得注意的是，onChange与IE 7/8不相称。 jQuery is a good workaround. jQuery是一个很好的解决方法。
jQuery method: jQuery方法：
$("#trig_method").change(trigonchange());
Reference: http://api.jquery.com/change/ 参考： http ： //api.jquery.com/change/
EDIT: 编辑：
If you're going jQuery, make sure jQuery is added to your project (here's the quick and easy CDN method — insert in head tag): 如果你要使用jQuery，请确保将jQuery添加到项目中（这里是快速简单的CDN方法 - 插入head标签）：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Then add 然后加
$("#trig_method").change(trigonchange());
somewhere below your HTML element that you are targeting. 您要定位的HTML元素下方的某个位置。 If you want it above the element, you'll need to wrap that function with a $(document.ready()) like: 如果你想要它在元素上面，你需要用$（document.ready（））包装该函数，如：
$(document).ready(function) {
$("#trig_method").change(trigonchange());
}
But your real problem was solved first by Barmar , so I'd mark his as the correct answer. 但是你真正的问题首先由Barmar解决，所以我将他标记为正确的答案。
After several tries, changing this line: 几次尝试后，改变这一行：
<select name="trig_method" id="trig_method" onchange="trigonchange();...
to 至
<select name="trig_method" id="trig_method" onchange="trigonchange();this.selectedIndex=this.defaultIndex;" onfocus="this.defaultIndex=this.selectedIndex;">
as Barmar suggested works . 正如巴马尔所建议的那样。
You can't have two onChanges called in the same tag. 您不能在同一个标记中调用两个onChange。 Not sure if you intended to have both happen as a consequence of an onChange or not, but that is exactly what was causing the problem. 不确定你是否打算因为onChange而发生这两种情况，但这正是造成问题的原因。
As for IE9+, your revised code should work. 至于IE9 +，您的修改后的代码应该可行。 If you want to support IE7/8, use jQuery as I've described to call the change rather than having onChange in the tag. 如果你想支持IE7 / 8，请使用我所描述的jQuery调用更改，而不是在标记中使用onChange。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.