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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18249758/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 12:11:26  来源:igfitidea点击:

I can't get the value of a input within a datalist?

javascripthtmlinputhtml-datalist

提问by Jacques Koekemoer

I have a datalist box that looks like this:

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

<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>

and I have a JavaScript code which has to get the value from this datalist.

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

I tried all the following things to get the value

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

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

and it just does not seem to work.

它似乎不起作用。

Is there something wrong with my JavaScript or with my HTML code?

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

when I use the console to get the value: when I use the console to get the value

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

采纳答案by The Dark Knight

Took sometime to figure this out. Look at my code below :

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

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>

Now the first one will get the valueas expected, but the textoptionwill not work for the obvious reason that you do not have text here. Also, innerHTMLwill get you the child html and not the value. Further more , you can't get innerHTMLof an input list, but you can get it for the datalist.

现在第一个将获得value预期的结果,但由于textoption您在此处没有文本的明显原因,它将无法正常工作。此外,innerHTML会为您提供子 html 而不是值。此外,您无法获得innerHTML输入列表,但可以为数据列表获得它。

Try this : console.log(document.getElementById('screens.screenid-datalist').innerHTML);

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

I tried it and got the innerHTMLwithout any hassle :

我试过了,innerHTML没有任何麻烦:

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

Find the bin here : http://jsbin.com/inigaj/1/edit

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