带有datalist标记内的选项标记的html data-属性

Question

代码：

<div style="display:table-row;">
    <div style="display:table-cell;" id="page-wrapper" >
    <label for="default_list">Search for GST : </label>
    <input type="text" id="default_list" list="widget_for" placeholder="Type to search ">

    <datalist id="widget_for" name="widget_for" style="overflow: scroll; width: 100%; height:500px" >
    {% for list in opt_list %}
        <option value="{{list.name}}" data-id="{{list.id}}" size="5" > </option>
    {% endfor %}        
    </datalist>    
    </div>
</div>
<input type="submit" class="button" id="save-node-type" value="Create" onclick="NavigateToSite()"/>

我想在选择该选项时获取data-id属性。 使用的JS如下：

function NavigateToSite(){
    var default_list = document.getElementById('default_list')
    var basic1 = default_list.getAttribute('data-id')
    console.log(basic1)
}

每次o / p为空。哪里出错了？