从数据列表选择中隐藏值

Question

我正在使用 datalist 来显示一系列选择。 当显示这些选项时，值和文本都在显示，就像 datalist 应该工作一样。 但是，我需要隐藏列表中的值，只显示文本。

经过大量搜索后，我发现使用data-value应该可以工作，而不仅仅是value 。 问题是我不能让它工作。 我使用 datalist 的原因是我需要它才能获得功能性的可搜索下拉菜单。 如果不是这样，我早就放弃了。

我的代码如下：

 var myinput = document.getElementById('example'); var divs = document.querySelectorAll('.hidden'); myinput.addEventListener('change', function() { var mydiv = document.getElementById(this.value); divs.forEach(div => { div.style.display = div.id === this.value ? 'block' : 'none'; }); });

 .hidden { display: none; }

 <fieldset> <legend>This is a datalist</legend> <input type="text" id="example" list="brow" /> <datalist id="brow"> <option value="div1">Choice 1</option> <option value="div2">Choice 2</option> </datalist> </fieldset> <div class="hidden" id="div1">This is div1</div> <div class="hidden" id="div2">This is div2</div>

Answer 1

它优先考虑您在dataList中的值，请确保您的选项值和选项文本保持不变，以免重复

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