JavaScript onChange 未在 IE 中触发

Question

我正在尝试在下拉列表更改为特定值时运行 javascript，这在 Chrome 中一切正常，但 IE 只是拒绝触发“onChange”功能。

这是我的下拉列表代码：

<select name="typeTenancy" onchange='TenancyCheck(this.value);' required>
  <option value=""></option>                                                
  <option value="1">1 - Option 1</option>   
  <option value="2">2 - Option 2</option>   
  <option value="3">3 - Option 3</option>
  <option value="4">4 - Option 4</option>
  <option value="5">5 - Option 5</option>                                                           
</select>

这是我希望在选择选项 4 时运行的 Javascript：

function TenancyCheck(val){
    var element=document.getElementById('tenancyDuration');
    if(val=='4')
    blockReqTenancy();
    else  
    displayTenancy();
}

function blockReqTenancy() {
    document.getElementById("tenancyDuration").style="display:block";
    document.getElementById("tenancyDuration").required=true;
}

function displayTenancy() {
    document.getElementById("tenancyDuration").style="display:none";
    document.getElementById("tenancyDuration").required=false;
}

在选择选项4时，它基本上显示了输入字段，但使用Internet Explorer 11时显示出没有任何内容。

我也检查过并将脚本 src 放在我的 HTML 代码的正文中。

如果有人能解释为什么会发生这种情况并指出正确的方向来解决这个问题，我们将不胜感激。

Answer 1

当您说 getElementById 时，您没有名为“tenancyDuration”的 id。你可以添加它。

对于 IE 稍微改变一下你的功能。像 style.display="block";并使用 setAttribute 函数

完整代码

<select name="typeTenancy" id ="tenancyDuration" onchange='TenancyCheck(this.value);' required>
 <option value=""></option>                                                
 <option value="1">1 - Option 1</option>   
 <option value="2">2 - Option 2</option>   
 <option value="3">3 - Option 3</option>
 <option value="4">4 - Option 4</option>
 <option value="5">5 - Option 5</option>                                                           
</select>

<script>
function TenancyCheck(val){
  var element=document.getElementById('tenancyDuration');
  if(val=='4')
   blockReqTenancy();
  else  
   displayTenancy();
}

function blockReqTenancy() {
document.getElementById("tenancyDuration").style.display="block";
document.getElementById("tenancyDuration").setAttribute("required", true); 
}

function displayTenancy() {
 document.getElementById("tenancyDuration").style.display="none";
 document.getElementById("tenancyDuration").setAttribute("required", false); 
}
</script>