我无法获取数据列表中输入的值？答案

【问题标题】：I can't get the value of a input within a datalist?我无法获取数据列表中输入的值？
【发布时间】：2013-08-15 09:22:06
【问题描述】：

我有一个如下所示的数据列表框：

<td>
    <input list="screens.screenid-datalist" type="text" id="screens.screenid" onblur="validate('0','0','jacques')">
    <datalist id="screens.screenid-datalist">
        <option value="Login"></option>
        <option value="ScreenCreator"></option>
    </datalist>
    <label id="val-screens.screenid" class="Label_Error" style="visibility: hidden;">*</label>
</td>

我有一个 JavaScript 代码，它必须从此数据列表中获取值。

我尝试了以下所有方法来获得价值

document.getElementById('screens.screenid').value
document.getElementById('screens.screenid').text
document.getElementById('screens.screenid').innerHTML
document.getElementById('screens.screenid').option

而且它似乎不起作用。

我的 JavaScript 或 HTML 代码有问题吗？

当我使用控制台获取值时：

【问题讨论】：

对我来说很好用（参见jsfiddle.net/Uz2ak） - 要从type=text 输入中的数据列表中选择一个项目，我必须开始输入它并从菜单中选择它，或者按向下箭头，在 Chrome 28 中。
document.getElementById('screens.screenid').value 也适用于我（Chrome 30、IE 10 和 FF 22）。
@Jacques 你能为这段代码提供更多的上下文吗？例如，您的脚本是否可能在 DOM 准备就绪之前运行？
你想从数据列表或输入中获取价值吗？？

标签： javascript html input html-datalist

【解决方案1】：

花了一些时间才弄清楚这一点。看看我下面的代码：

function validate(){
    console.log(document.getElementById('screens.screenid').value); //WORKS

    console.log(document.getElementById('screens.screenid').text);
    console.log(document.getElementById('screens.screenid').innerHTML);
    console.log(document.getElementById('screens.screenid').option);

}

<input list="screens.screenid-datalist" type="text" id="screens.screenid" onblur="validate('0','0','jacques')">
   <datalist id="screens.screenid-datalist">
	  <option value="Login"></option>
	  <option value="ScreenCreator"></option>
  </datalist>
<label id="val-screens.screenid" class="Label_Error" style="visibility: hidden;">*</label>
<a href='#' onclick="validate">validate</a>

现在第一个将按预期获得value，但text option 将不起作用，原因很明显，您在此处没有文本。此外，innerHTML 将为您提供子 html 而不是值。此外，您无法获取输入列表的innerHTML，但您可以获取数据列表。

试试这个：console.log(document.getElementById('screens.screenid-datalist').innerHTML);

我试过了，没有任何麻烦就得到了innerHTML：

<option value="Login"></option>
<option value="ScreenCreator"></option>

在这里找到垃圾箱：http://jsbin.com/inigaj/1/edit

【讨论】：

我添加了控制台的屏幕截图，由于某种原因它似乎对我不起作用
@Jacques 你的输入列表是动态形成的吗？
@Jacques ：这就是它没有出现的原因，因为 console.log 是在列表形成之前发生的。尝试诱导javascript超时以延迟console.log或给Event.onDOMready
我将如何使用 Event.onDOMready，这是我的 js 函数中返回布尔值的事件还是 html 文档上的事件？