从数据列表选择中隐藏值

Question

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

经过大量的搜索，我发现使用data-value应该工作，而不仅仅是value。问题是我没法让它工作。我使用数据的原因是，我需要有它，以便得到一个功能可搜索的下拉列表。如果不是因为那个，我早就把它摔了。

我的代码如下:

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>