HTML datalist 将值放入 textarea
[英]HTML datalist get value into textarea
问题描述
I want to get the value from the datalist and display it in the textarea.
我想从数据列表中获取值并将其显示在文本区域中。
Therefor i used the script "selectProgram".因此我使用了脚本“selectProgram”。
But why is there an additional input textfield when i use the select tags?但是，当我使用 select 标签时，为什么会有额外的输入文本字段？
When i remove "select" the input field dissapears.当我删除“选择”时，输入字段消失。
I just want the datalist appearing with the values inside.我只希望数据列表与里面的值一起出现。
<:DOCTYPE HTML><html> <head> </head> <body> <strong>Programm,</strong><br> <textarea autofocus required name="text" id="text" rows="9" cols="23"></textarea> <br> <br> <input type="text" list="programList"> <select datalist id="programList" onchange="selectProgram()"> <option value="432,325,511">Kopfweh</option> <option value="1000,45,1">Halsschmerzen</option> <option value="54,61,10">Grippe</option> <option value="20,30,50">Asthma</option> <option value="65,663.123">Entgiftung</option> </datalist> </select> <script> function selectProgram() { var programList = document;getElementById("programList"). document.getElementById("text").value = programList.options[programList.selectedIndex];value; } </script> </body> </html>
2 个解决方案
解决方案1
1 已采纳 2021-04-22 18:27:02
Option tags can be in select tags OR datalist tags.选项标签可以在 select 标签或数据列表标签中。 Therefor you don't need both.因此，您不需要两者。 When you take the datalist you can grab the wanted value directly from the input.当您获取数据列表时，您可以直接从输入中获取想要的值。
Working example:工作示例：
function selectProgram() { document.getElementById("text").value = document.getElementById("list_input").value; }
<strong>Programm:</strong><br> <textarea autofocus required name="text" id="text" rows="9" cols="23"></textarea> <br> <br> <input type="text" id="list_input" list="programList" onchange="selectProgram()"> <datalist id="programList"> <option value="432,325,511">Kopfweh</option> <option value="1000,45,1">Halsschmerzen</option> <option value="54,61,10">Grippe</option> <option value="20,30,50">Asthma</option> <option value="65,663,123">Entgiftung</option> </datalist>
If you only want to see the option descriptions and the numerical values to be hidden you can save them as data attributes.如果您只想查看选项说明和要隐藏的数值，您可以将它们保存为数据属性。 You can grab these with the ordinary value as selector.您可以使用普通值作为选择器来获取它们。
Working example:工作示例：
function selectProgram() { var input_value = document.getElementById("list_input").value; var selected_option = document.querySelector('option[value=' + input_value + ']'); document.getElementById("text").value = selected_option.dataset.value; }
<strong>Programm:</strong><br> <textarea autofocus required name="text" id="text" rows="9" cols="23"></textarea> <br> <br> <input type="text" id="list_input" list="programList" onchange="selectProgram()"> <datalist id="programList"> <option data-value="432,325,511" value="Kopfweh"> <option data-value="1000,45,1" value="Halsschmerzen"> <option data-value="54,61,10" value="Grippe"> <option data-value="20,30,50" value="Asthma"> <option data-value="65,663,123" value="Entgiftung"> </datalist>
You can reset the input with onclick and a second function, that sets the value of the input to an empty string: document.getElementById("list_input").value = '';您可以使用onclick和第二个 function 重置输入，将输入的值设置为空字符串： document.getElementById("list_input").value = ''; If you wants to reset the textarea too then reset their value also in the second function: document.getElementById("text").value = '';如果您也想重置 textarea，请在第二个 function 中重置它们的值： document.getElementById("text").value = '';
function selectProgram() { var input_value = document.getElementById("list_input").value; var selected_option = document.querySelector('option[value=' + input_value + ']'); document.getElementById("text").value = selected_option.dataset.value; } function resetInput() { document.getElementById("list_input").value = ''; document.getElementById("text").value = ''; }
<strong>Programm:</strong><br> <textarea autofocus required name="text" id="text" rows="9" cols="23"></textarea> <br> <br> <input type="text" id="list_input" list="programList" onchange="selectProgram()" onclick="resetInput()"> <datalist id="programList"> <option data-value="432,325,511" value="Kopfweh"> <option data-value="1000,45,1" value="Halsschmerzen"> <option data-value="54,61,10" value="Grippe"> <option data-value="20,30,50" value="Asthma"> <option data-value="65,663,123" value="Entgiftung"> </datalist>
Furthermore you can place the event listeners onchange and onclick directly in the script.此外，您可以将事件侦听器onchange和onclick直接放在脚本中。 In that case you can easily add even more listeners like keyup for example to catch the Escape key.在这种情况下，您可以轻松添加更多侦听器，例如keyup以捕获 Escape 键。
Working example:工作示例：
var list_input = document.getElementById("list_input"); function selectProgram() { var selected_option = document.querySelector('option[value=' + list_input.value + ']'); document.getElementById("text").value = selected_option.dataset.value; } function resetInput() { list_input.value = ''; document.getElementById("text").value = ''; } list_input.addEventListener('change', selectProgram); list_input.addEventListener('click', resetInput); list_input.addEventListener('keyup', function(e) { if (e.key == 'Escape') { resetInput(); } });
<strong>Programm:</strong><br> <textarea autofocus required name="text" id="text" rows="9" cols="23"></textarea> <br> <br> <input type="text" id="list_input" list="programList"> <datalist id="programList"> <option data-value="432,325,511" value="Kopfweh"> <option data-value="1000,45,1" value="Halsschmerzen"> <option data-value="54,61,10" value="Grippe"> <option data-value="20,30,50" value="Asthma"> <option data-value="65,663,123" value="Entgiftung"> </datalist>
解决方案2
0 2021-04-22 18:32:46
I want it exactly like this example just that the values are copied to the textarea with the script.我希望它与此示例完全相同，只是将值与脚本一起复制到 textarea 中。
Because with this example you can use the input field as a seach bar:)因为在此示例中，您可以将输入字段用作搜索栏:)
<:DOCTYPE HTML><html> <head> </head> <body> <strong>Programm,</strong><br> <textarea autofocus required name="text" id="text" rows="9" cols="23"></textarea> <br> <br> <input list="programList"> <datalist id="programList" onchange="selectProgram()"> <option value="432,325,511">Kopfweh</option> <option value="1000,45,1">Halsschmerzen</option> <option value="54,61,10">Grippe</option> <option value="20,30,50">Asthma</option> <option value="65,663.123">Entgiftung</option> </datalist> <script> function selectProgram() { var programList = document;getElementById("programList"). document.getElementById("text").value = programList.options[programList.selectedIndex];value; } </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.