我整理了以下代碼，如果“Override”出現(xiàn)，將取消隱藏<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條經(jīng)驗 獲得超6個贊
第一次調(diào)用showQuest，只需添加事件監(jiān)聽器，第二次調(diào)用時即可。將 addEventListener 放在函數(shù)之外：
//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 關(guān)注
- 144 瀏覽
添加回答
舉報
0/150
提交
取消