如何根据datalist选中项动态显示对应的div元素

你的代码无法生效有两个核心错误：

• document.getElementById() 接收的参数是纯id字符串，不需要加CSS选择器的#前缀，加了会找不到元素
• 逻辑写死了获取固定元素，既没有根据输入框选中的值匹配对应id的div，也没有在切换选项时隐藏上一个展示的div，会导致显示混乱

CSS部分可以直接复用你原有的隐藏类：

.hidden {
  display: none;
}

HTML结构无需调整，注意原来div的文本末尾多写了一个多余的>，修正后如下：

<fieldset>
    <legend>This is a datalist</legend>
    <input type="text" id="example" list="brow" />
    <datalist id="brow">
        <option value="div1" />
        <option value="div2" />
    </datalist>
</fieldset>

<div class="hidden" id="div1">This is div1</div>
<div class="hidden" id="div2">This is div2</div>

JS逻辑替换为如下代码即可：

const input = document.getElementById('example');
// 缓存所有需要切换显示的目标div，后续新增选项只要对应div加在选择器里即可
const allTargetDiv = document.querySelectorAll('#div1, #div2');

input.addEventListener('change', function() {
  const currentValue = this.value.trim();
  // 第一步：先把所有目标div全部隐藏，重置状态
  allTargetDiv.forEach(div => div.classList.add('hidden'));
  // 第二步：如果当前输入值不为空，找到id和值匹配的div展示
  if (currentValue) {
    const matchDiv = document.getElementById(currentValue);
    matchDiv?.classList.remove('hidden');
  }
});

这个写法不需要写if(value === 'div1'){...}else if(...)这类硬编码判断，后续你要加div3、div4选项，只需要：

• 在datalist里加对应value的option
• 加对应id的div
• 把新div的id加到allTargetDiv的选择器里
  就可以自动适配，不需要改动事件里的核心逻辑。

内容的提问来源于stack exchange，提问作者Cosmochen