无法获取数据列表中项目的值

Question

代码如下：

HTML 部分：

<div style="display:table-cell;" id="page-wrapper" >

<label for="default">Search for GST : </label>
<input type="text" id="default" list="widget_for" placeholder="Type to search for GST">
<datalist id="widget_for" name="widget_for" >
{% for list in opt_list %}
    <option value="{{list.name}}" size="5" > </option>
{% endfor %}

</datalist>    
</div>

脚本部分：

function NavigateToSite(){
    var selectedValue = document.getElementById('widget_for').value
    console.log(selectedValue)
}

NavigateToSite() 在按下按钮时被调用。

我无法获取变量 selectedValue 中的值。它返回空。

Answer 1

您应该 select #default 元素的值代替：

function NavigateToSite(){
  var selectedValue = document.getElementById('default').value
  console.log(selectedValue)
}

无法获取数据列表中项目的值

Cannot fetch the value of items in datalist

javascript

html-datalist