javascript - 具有选定选项的 Div 以过滤另一个 div

Question

<div style="float:center; width:auto; margin:5px 0px; text-align:center;">
 Please Select Your Alphabet:&nbsp;
    </div>
   <div style="float:center; width:auto; margin:5px 0px; text-align:center;">
  &nbsp;<select class="a1" id="ALPHA1" style="width:90%;">
         <option value="1">A</option>
         <option value="2">B</option>
         <option value="3">C</option>
         <option value="4">D</option>
        </select>
    </div><br>
  <div style="float:center; width:auto; margin:5px 0px; text-align:center;">
 Please Select Sub Alphabet:&nbsp;
 </div>
   <div style="float:center; width:auto; margin:5px 0px; text-align:center;">
  &nbsp;<select class="a1" id="ALPHA2" style="width:90%;">
         <option value="1">B1</option>
         <option value="2">B2</option>
        </select>
 </div>

我有一个包含多个选项的 div。我只想选择一个选项来“切换”另一个 div 的显示。然后，此 div 将有两个可供选择的可能选项。

我尝试了各种解决方案，似乎都涉及 div 的“切换”文本出现，但我希望切换是另一个带有选定选项的 div。我确实需要它是纯 JS 而不是 JQuery。

<div style="float:center; width:auto; margin:5px 0px; text-align:center;">
 Please Select Your Alphabet:&nbsp;
    </div>
   <div style="float:center; width:auto; margin:5px 0px; text-align:center;">
  &nbsp;<select class="a1" id="ALPHA1" style="width:90%;">
         <option value="1">A</option>
         <option value="2">B</option>
         <option value="3">C</option>
         <option value="4">D</option>
        </select>
    </div><br>
  <div style="float:center; width:auto; margin:5px 0px; text-align:center;">
 Please Select Sub Alphabet:&nbsp;
 </div>
   <div style="float:center; width:auto; margin:5px 0px; text-align:center;">
  &nbsp;<select class="a1" id="ALPHA2" style="width:90%;">
         <option value="1">B1</option>
         <option value="2">B2</option>
        </select>
 </div>

我只希望在选择 B 时出现第二个 div，然后能够选择 B1 或 B2 以继续。我假设我需要编写某种函数，但由于选项有限，我想知道是否有另一种方法可以在结果之间切换。如果没有，我将如何处理该功能？

Answer 1

除了实现显示和隐藏第二个输入框的功能外，我还进行了相当多的重构以合并重复的代码。我编写的代码或多或少遵循了 HTML 结构的最佳实践，并且更加清晰易懂。

• 根据当前公认的 Web 开发标准，CSS 几乎应该始终位于外部 CSS 文件中，而不是内联定义。无论哪种方式，它都可能工作得很好，但使用类定义来引用 CSS 可以消除大量重复代码。

• 您的代码中有几个 div 不需要，可以删除。这样做实际上会产生一个更有用、更易于访问的网站，因为它允许屏幕阅读器可视化页面的层次结构。

• 我用过 CSS Flexbox将标签堆叠在选择框的顶部，这样 <br>没有必要。此步骤不是严格要求的，但从长远来看比使用 inline 更具可扩展性。显示。

• 最后，使用 <label>元素来封装下拉菜单的标签文本而不是 div 进一步提高了可访问性。这样一来，用户就可以导航到该标签并单击该标签以激活下拉菜单，并且还可以为屏幕阅读器对两个元素(标签和选择)进行逻辑分组。

// Find the select element that we want to monitor, and watch for change events.
document.getElementById('ALPHA1').addEventListener('change', function(e) {
  // Whenever the selection changes, if it's equal to 2 ("B")...
  if (e.target.value === "2") {
    // Add a class to the second dropdown that tells it to display.
    document.getElementById("subalpha").classList.add("show");
  } else {
    // If the selection is any other value, then remove the class to tell the second dropdown to hide.
    document.getElementById("subalpha").classList.remove("show");
  }
});

.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: auto;
  margin: 5px 0px;
  text-align: center;
}

.container select {
  width: 90%;
}

#alpha {
  margin-bottom: 1rem;
}

#subalpha {
  display: none;
}

#subalpha.show {
  display: flex;
}

<div id="alpha" class="container">
  <label for="ALPHA1">Please select your alphabet: </label>
  <select class="a1" id="ALPHA1">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    <option value="4">D</option>
  </select>
</div>
<div id="subalpha" class="container">
  <label for="ALPHA2">Please select sub alphabet: </label>
  <select class="a2" id="ALPHA2">
    <option value="1">B1</option>
    <option value="2">B2</option>
  </select>
</div>