html实现组合式级联选择器，只能有一个下拉菜单，展示两级内容

可以使用 `<select>` 元素和 `<option>` 元素来实现组合式级联选择器。代码如下：

<select id="fruit">
    <option value="">请选择水果</option>
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
</select>
<select id="color" disabled>
    <option value="">请选择颜色</option>
    <option class="apple" value="red">红色</option>
    <option class="apple" value="green">绿色</option>
    <option class="banana" value="yellow">黄色</option>
    <option class="banana" value="black">黑色</option>
</select>

上面的代码实现了一个水果和颜色的组合式级联选择器，只有一个下拉菜单，展示了两级内容。第一个下拉菜单展示水果选项，第二个下拉菜单展示对应水果的颜色选项。

注意，第二个下拉菜单默认是禁用状态，只有在选择了第一个下拉菜单的选项后才会启用。可以通过 JavaScript 来实现该功能，代码如下：

const fruitSelect = document.getElementById('fruit');
const colorSelect = document.getElementById('color');

fruitSelect.addEventListener('change', function() {
    const selectedFruit = this.value;
    colorSelect.disabled = false;
    Array.from(colorSelect.options).forEach(function(option) {
        option.style.display = 'none';
        if (option.classList.contains(selectedFruit)) {
            option.style.display = 'block';
        }
    });
});

上面的代码使用了事件监听器来监听第一个下拉菜单的改变事件，当选择了一个水果选项后，会启用第二个下拉菜单，并且只显示对应水果的颜色选项。具体实现是通过遍历第二个下拉菜单的所有选项，只显示对应水果的颜色选项，其它选项则隐藏。