我无法获得数据列表中输入的值？

Question

我有一个看起来像这样的数据列表框:

<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代码,必须从这个datalist获取值.

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

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

它似乎没有用.

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

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

Answer 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