javascript - 如何根据复选框设置更改下拉菜单选项？

Question

我定义了以下菜单选项:-

    <label><strong>Release #1:</strong></label>
    <select id="selectedBaseRelease">
        <option value="/~releases/file2">ICC2_O-2018.06</option>
        <option value="/~releases/file3" selected >ICC2_N-2017.09-SP6</option>
        <option value="/~releases/file4">ICC2_N-2017.09-SP5</option>
    </select>
    <br><br>
    <label><strong>Release #2:</strong></label>
    <select id="selectedNewRelease">
        <option value="/~releases/file1" selected >ICC2_O-2018.06-SP1</option>
        <option value="/~releases/file2">ICC2_O-2018.06</option>
        <option value="/~releases/file3">ICC2_N-2017.09-SP6</option>
    </select>

我想添加以下复选框:-

    <strong>Include T-builds:</strong> <input type="checkbox" id="include_Ts"/>

...当选中 include_Ts 时，我希望更改 selectedBaseRelease 和 selectedNewRelease 的值列表，例如类似...

    <label><strong>Release #1:</strong></label>
    <select id="selectedBaseRelease">
        <option value="/~releases/file2">ICC2_O-2018.06</option>
        <option value="/~releases/file2a">ICC2_O-2018.06a</option>
        <option value="/~releases/file3" selected >ICC2_N-2017.09-SP6</option>
        <option value="/~releases/file3a">ICC2_N-2017.09-SP6a</option>
        <option value="/~releases/file4">ICC2_N-2017.09-SP5</option>
        <option value="/~releases/file4a">ICC2_N-2017.09-SP5a</option>
    </select>
    <br><br>
    <label><strong>Release #2:</strong></label>
    <select id="selectedNewRelease">
        <option value="/~releases/file1" selected >ICC2_O-2018.06-SP1</option>
        <option value="/~releases/file1a">ICC2_O-2018.06-SP1</option>
        <option value="/~releases/file2">ICC2_O-2018.06</option>
        <option value="/~releases/file2a">ICC2_O-2018.06a</option>
        <option value="/~releases/file3">ICC2_N-2017.09-SP6</option>
        <option value="/~releases/file3a">ICC2_N-2017.09-SP6a</option>
    </select>

当检查 include_Ts 时，如何定义 if-then 条件来激活备用选择 ID 选项？

Answer 1

这是一种仅使用 CSS 而无需使用 JavaScript 来实现此目的的方法。下面是现场演示。

有一些事情允许这种情况发生:

• 我们将为您默认隐藏的值提供一个类 ( <option class="tbuild"... )
• 在 CSS 中，我们默认隐藏具有该类的元素 ( .tbuild { display: none; } )
• 在 CSS 中，我们还要查看 #include_Ts 是否复选框被选中，如果是，我们显示那些 .tbuild选项。
  • 请注意，要发生这种情况，层次结构需要与此演示大致相同。该复选框需要位于选择菜单之前，并且不能位于与 select 分开的其自己的父元素内。元素。

如果您有任何疑问，请告诉我!

.tbuild {
  display: none;
}

#include_Ts:checked~select .tbuild {
  display: block;
}

<strong>Include T-builds:</strong> <input type="checkbox" id="include_Ts" />

<br><br>

<label><strong>Release #1:</strong></label>
<select id="selectedBaseRelease">
  <option value="/~releases/file2">ICC2_O-2018.06</option>
  <option value="/~releases/file2a" class="tbuild">ICC2_O-2018.06a</option>
  <option value="/~releases/file3" selected>ICC2_N-2017.09-SP6</option>
  <option value="/~releases/file3a" class="tbuild">ICC2_N-2017.09-SP6a</option>
  <option value="/~releases/file4">ICC2_N-2017.09-SP5</option>
  <option value="/~releases/file4a" class="tbuild">ICC2_N-2017.09-SP5a</option>
</select>

<br><br>

<label><strong>Release #2:</strong></label>
<select id="selectedNewRelease">
  <option value="/~releases/file1" selected>ICC2_O-2018.06-SP1</option>
  <option value="/~releases/file1a" class="tbuild">ICC2_O-2018.06-SP1</option>
  <option value="/~releases/file2">ICC2_O-2018.06</option>
  <option value="/~releases/file2a" class="tbuild">ICC2_O-2018.06a</option>
  <option value="/~releases/file3">ICC2_N-2017.09-SP6</option>
  <option value="/~releases/file3a" class="tbuild">ICC2_N-2017.09-SP6a</option>
</select>