javascript 如何使用简单的 Java 脚本在输入框中设置 onClick 选定值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8427370/
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
How to set onClick selected value in input box using simple Java script
提问by Swapnil R.
I have div, which has one input box and it generates some values in <ol><li>through ajax, now I wanted to select one of the values from <li>and set it in that input box using simple javascript.
我有一个 div，它有一个输入框，它<ol><li>通过 ajax生成一些值，现在我想从其中选择一个值<li>并使用简单的 javascript 将其设置在该输入框中。
<div id="abc">
<input type="text" name="inputbox" id="inputboxID" class="inptBx"/>
<ol>
<li id="1">sam</li>
<li id="2">joe</li>
<li id="3">dan</li>
<li id="4">tom</li>
<li id="5">dick</li>
</ol>
</div>
Example : I have a div "abc" which has a inputbox, if I search something in it I get result in <ol><li></li></ol>tags(dropdown) through ajax, Now if I click on "tom", I want this value to be set in my inputbox.
示例：我有一个 div“abc”，它有一个输入框，如果我在其中搜索某些内容，我会<ol><li></li></ol>通过 ajax得到标签（下拉列表）的结果，现在如果我点击“tom”，我希望在我的输入框中设置这个值.
Please suggest a javascript solution for this.
请为此提出一个javascript解决方案。
Thanks in advance
提前致谢
回答by Albert Tsang
<script type="text/javascript">
function display(inPut)
{
var t=document.getElementById("inputboxID");
t.value = inPut;
}
</script>
<div id="abc">
<input type="text" name="inputbox" id="inputboxID" class="inptBx"/>
<ol>
<li id="1" onClick="javascript:display(this.innerText)">sam</li>
<li id="2" onClick="javascript:display(this.innerText)">joe</li>
<li id="3" onClick="javascript:display(this.innerText)">dan</li>
<li id="4" onClick="javascript:display(this.innerText)">tom</li>
<li id="5" onClick="javascript:display(this.innerText)">dick</li>
</ol>
</div>
回答by Cory Danielson
for (var i = 1; i < 6; i++)
document.getElementById(i).addEventListener('click', loadText);
function loadText() {
document.getElementById('inputboxID').value = this.innerHTML || this.innerText;
}
Also, make sure you fix the errors in your HTML markup:
另外，请确保修复 HTML 标记中的错误：
<li id="3">dan</li>
<li id="4">tom</li>
You were missing the " after 3 and 4
你在 3 和 4 之后错过了“
3 ways to include this script into your page so that it will execute properly:
将此脚本包含在页面中以使其正确执行的 3 种方法：
<body><body><body><body>回答by NoLifeKing
If you use jQuery, you could use this snippet.
如果您使用 jQuery，则可以使用此代码段。
<script type="text/javascript">
$("#abc li").click(function() { $("#inputboxID").val($(this).text()); });
</script>
回答by Selvakumar Ponnusamy
construct HTML like this while loading search results in div
在 div 中加载搜索结果时构建这样的 HTML
<li id="4" onclick='$("#inputboxID").val(this.innerText)' >tom</li>
