根据所选下拉选项取消隐藏 div
我整理了以下代码，如果“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 selected
function 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 中的行为相同。
任何帮助将不胜感激。
慕虎73712781回答
-
慕侠2389804
第一次调用showQuest，只需添加事件监听器，第二次调用时即可。将 addEventListener 放在函数之外：//function to unhide questions if Override is selecteddocument.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>
随时随地看视频慕课网APP
相关分类
Html5