如何使用DOM API从输入列表中选择一个选项

Question

 <input list="genderList" id="genderListId">
 <datalist id="genderList">
    <option value="MALE"></option>
    <option value="FEMALE"></option>
 </datalist>

在上面的示例中，如何将值设置为可用选项之一。

使用下面的代码时，MALE文本显示在UI中，但值仍未更新

document.querySelector('#genderListId').value = 'MALE'

Answer 1

  

如何将值设置为可用选项之一

尝试以下示例，该示例从列表中选择第一个选项

document.querySelector('#genderListId').value = document.querySelector('#genderList').options[0].value;

<input list="genderList" id="genderListId" autofocus='true' placeholder="Type .."/>
<datalist id="genderList">
    <option value="MALE"></option>
    <option value="FEMALE"></option>
 </datalist>