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_T时，如何定义一个if-then条件来激活替代选择ID选项？

Answer 1

这是仅使用CSS而不使用JavaScript的一种方法。下面的实时演示。

一些事情允许这种情况发生：

我们在默认情况下为您要隐藏的值提供了一个类（replicas）
在CSS中，默认情况下，我们使用该类隐藏元素（<option class="tbuild"...）
在CSS中，我们还希望查看是否选中了.tbuild { display: none; }复选框，如果已选中，则显示那些#include_Ts选项。
- 请注意，要使这种情况发生，层次结构必须与此演示保持大致相同。复选框必须位于选择菜单之前，并且不能位于与.tbuild元素分开的其自己的父元素之内。

让我知道您是否有任何疑问！

select

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

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

1 个答案: