我整理了以下代码，如果“Override”出现，将取消隐藏<div>。从下拉列表中选择。我遇到的问题是选择“覆盖”，然后选择另一个原因，然后再次选择“覆盖”以使其按预期工作。我的目标是在第一次选择它时将其取消隐藏。HTML：<body> <div class="main"> <div class="row"> <!-- Begin left side data entry --> <form> <!-- Form tag is only used to allow the Clear button at the bottom to clear the data entry area. --> <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;
});
<div class="main">
<div class="row">
<!-- Begin left side data entry -->
<form>
<!-- Form tag is only used to allow the Clear button at the bottom to clear the data entry area. -->
<div class="cell" style="vertical-align: top; padding-top: 10px; padding-left: 145px;">
<div class="row">
<div class="cell">1. Reason for Interuption </div>
<select class="cell" id="Q1">
<option value=""></option>
<option value="Call">Call</option>
<option value="Argument">Argument</option>
<option value="Sleep">Sleep</option>
<option value="Override">Override</option>
</select>
</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>
- 1 回答
- 0 关注
- 107 浏览
添加回答
举报
0/150
提交
取消