javascript代碼適用於mozilla和chrome，但不適用於IE

Question

我的腳本代碼：

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

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

我想在改變下拉列表（CMD / SCRIPT）時顯示/隱藏字段。 它完全適用於Mozilla和Chrome，但不適用於IE。 我已經添加了你們所有的建議並編輯了代碼。 但它還沒有工作（現在它不能在任何瀏覽器中工作）

Answer 1

您不能在元素中兩次使用相同的屬性。 如果你想在onchange上做多件事，把它們放在一個屬性中，用; 。

<select name="trig_method" id="trig_method" onchange="trigonchange();this.selectedIndex=this.defaultIndex;" onfocus="this.defaultIndex=this.selectedIndex;">

Answer 2

在選項中使用“value”而不是“Val”。 與選項中的值進行比較。 這是cmd而不是CMD。

Answer 3

值得注意的是，onChange與IE 7/8不相稱。 jQuery是一個很好的解決方法。

jQuery方法：

$("#trig_method").change(trigonchange());

參考： http ： //api.jquery.com/change/

編輯：

如果你要使用jQuery，請確保將jQuery添加到項目中（這里是快速簡單的CDN方法 - 插入head標簽）：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

然后加

$("#trig_method").change(trigonchange());

您要定位的HTML元素下方的某個位置。 如果你想要它在元素上面，你需要用$（document.ready（））包裝該函數，如：

$(document).ready(function) {
    $("#trig_method").change(trigonchange());
}

但是你真正的問題首先由Barmar解決，所以我將他標記為正確的答案。

幾次嘗試后，改變這一行：

<select name="trig_method" id="trig_method" onchange="trigonchange();...

至

<select name="trig_method" id="trig_method" onchange="trigonchange();this.selectedIndex=this.defaultIndex;" onfocus="this.defaultIndex=this.selectedIndex;">

正如巴馬爾所建議的那樣。

您不能在同一個標記中調用兩個onChange。 不確定你是否打算因為onChange而發生這兩種情況，但這正是造成問題的原因。

至於IE9 +，您的修改后的代碼應該可行。 如果你想支持IE7 / 8，請使用我所描述的jQuery調用更改，而不是在標記中使用onChange。

javascript代碼適用於mozilla和chrome，但不適用於IE

問題描述

3 個解決方案

解決方案1
2 2014-01-21 06:32:50

解決方案2
0 2014-01-21 06:35:01

解決方案3
0 2014-01-21 06:56:18

javascript代碼適用於mozilla和chrome，但不適用於IE

問題描述

3 個解決方案

解決方案1 2 2014-01-21 06:32:50

解決方案2 0 2014-01-21 06:35:01

解決方案3 0 2014-01-21 06:56:18

解決方案1
2 2014-01-21 06:32:50

解決方案2
0 2014-01-21 06:35:01

解決方案3
0 2014-01-21 06:56:18