6

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

<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 代码有问题吗？

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

4

1 回答 1

6

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

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

于 2013-08-15T09:38:11.570 回答