Question

我有一个基本的下拉列表，但是选择该值时无法对其进行控制（说未定义）

尝试过.value，.text，.val（），它们将不起作用。我已经在网上搜索了，但似乎找不到解决方法。

这是HTML。

<datalist id="browsers">
          <option value="Pacients"></option>
          <option value="Doctor"></option>
</datalist>

我尝试过的JS代码

console.log(document.getElementById('browsers').text);
console.log(document.getElementById('browsers').value);
console.log(document.getElementById('browsers').val());

选择后，我希望将'Pacients'或'Doctor'登录到控制台，但是却给了我undefined或.val（）错误

Answer 1

如果要下拉菜单，请使用<select>而不是<datalist>

<datalist>的目的是用作自动完成<input>上的建议列表。参见https://www.w3schools.com/tags/tag_datalist.asp

Answer 2

您可以使用JQuery并像下面这样访问它：

$("#browsers option:selected").text()

Answer 3

元素数据列表必须在输入中。

        <input id="browsers-input" list="browsers">
            <datalist id="browsers">
                  <option value="Pacients"></option>
                  <option value="Doctor"></option>
            </datalist>

<script>
var browsers_input = document.getElementById("browsers-input");
browsers_input.onchange = function(){
    console.log(browsers_input.value);
    console.log(document.getElementById("browsers-input").value);
};
</script>

无法从下拉数据列表JS / HTML中获取价值

3 个答案: