让javascript通过data-id引用改变select选项

Question

根据我有列表选项作为代码，我想创建一个javascript来选择它引用data-id我想让data-value="AFG"被选中了，我该怎么办?

<div class="choices__list choices__list--dropdown" aria-expanded="false">
<input type="text" class="choices__input choices__input--cloned" autocomplete="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" aria-label="false" placeholder="">
<div class="choices__list" role="listbox">
<div id="choices--p_nationality-1o-item-choice-1" class="choices__item choices__item--choice is-selected choices__placeholder choices__item--selectable is-highlighted" role="option" data-choice="" data-id="1" data-value="" data-select-text="ກົດເລືອກ" data-choice-selectable="" aria-selected="true"></div>
<div id="choices--p_nationality-1o-item-choice-2" class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="2" data-value="AFG" data-select-text="ກົດເລືອກ" data-choice-selectable="">Afghanistan</div>
<div id="choices--p_nationality-1o-item-choice-3" class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="3" data-value="ALA" data-select-text="ກົດເລືອກ" data-choice-selectable="">Åland Islands</div>

Answer 1

首先，如果您想创建一个下拉选项列表。您应该使用嵌套<options>的<select>元素。另外，<select>元素有一个默认角色listbox。要从它的自定义数据属性中选择一个下拉选项并使其被选中，您可以针对HTMLElement.dataset.someAttr从DOM中获取这些值。

const listbox = document.querySelector(".dropdown");
for (var i = 0; i < listbox.length; i++) {
if (listbox[i].dataset.id === "1") {
listbox[i].selected = true;
}
}
console.log(`data-id: ${listbox[0].dataset.id}`);
console.log(`data-val: ${listbox[0].dataset.val}`);
console.log(`selected: ${listbox[0].selected}`);

<select class="dropdown" size="2">
<option data-id="1" value="AFG" data-val="AFG">Afghanistan</option>
<option data-id="2" value="ALA" data-val="ALA">Åland Islands</option>
</select>