根据所选下拉选项取消隐藏 div

我整理了以下代码，如果“Override”出现，将取消隐藏<div>。从下拉列表中选择。我遇到的问题是选择“覆盖”，然后选择另一个原因，然后再次选择“覆盖”以使其按预期工作。我的目标是在第一次选择它时将其取消隐藏。HTML：<body> <div class="main"> <div class="row">  <form>  <div class="cell" style="vertical-align: top; padding-top: 10px; padding-left: 145px;"> <div class="row"> <div class="cell">1. Reason for Interuption </div> <label> <select class="cell" id="Q1" onChange="showQuest(this.value); store_value('Q1',this.value);"> <option value=""></option> <option value="Call">Call</option> <option value="Argument">Argument</option> <option value="Sleep">Sleep</option> <option value="Override">Override</option> </select> </label> </div> <div class="row" id="hidden8" style="display:none"> <div class="cell" id="Q8" >8. If Override, Override Approved by </div> <div class="cell"><input type="text" id="A8" /></div> </div> </div> </form> </div> </div></body>我整理的 JavaScript：//function to unhide questions if Override is selectedfunction showQuest(sel){ if (sel == 'Override') { document.getElementById('Q1').addEventListener('change', function () { var style = this.value == 'Override' ? 'block' : 'none'; document.getElementById('hidden8').style.display = style; document.getElementById('hidden9').style.display = style; }); }}当我将其加载到浏览器中时，我没有收到任何错误消息，并且代码在 JSFiddle 中的行为相同。任何帮助将不胜感激。

查看完整描述

1 回答

慕侠2389804

TA贡献1719条经验获得超6个赞

第一次调用showQuest，只需添加事件监听器，第二次调用时即可。将 addEventListener 放在函数之外：

//function to unhide questions if Override is selected

document.getElementById('Q1').addEventListener('change', function() {

var style = this.value == 'Override' ? 'block' : 'none';

document.getElementById('hidden8').style.display = style;

});

<form>

<div class="cell">1. Reason for Interuption </div>

<option value="Argument">Argument</option>

<option value="Sleep">Sleep</option>

<option value="Override">Override</option>

</select>

</div>

<div class="cell" id="Q8">8. If Override, Override Approved by </div>

</div>

</form>

</div>

反对回复 2023-12-19

热搜

最近搜索清空

根据所选下拉选项取消隐藏 div

根据所选下拉选项取消隐藏 div

1 回答

添加回答