根据选定的下拉选项取消隐藏 div

Question

我整理了以下代码，如果从下拉列表中 select 编辑了 "Override"，这些代码将取消隐藏 <div>。我遇到的问题是 select 覆盖，然后 select 另一个原因，然后 select 再次覆盖以使其按预期工作。

我的目标是在它第一次 selected 时取消隐藏。

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 中时，代码的行为相同。

如有任何帮助，我们将不胜感激。

Answer 1

第一次调用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>

根据选定的下拉选项取消隐藏 div

Unhide divs based on the selected dropdown option

html

javascript

dropdown