HTML datalist 将值放入 textarea
[英]HTML datalist get value into textarea
问题描述
我想从数据列表中获取值并将其显示在文本区域中。
因此我使用了脚本“selectProgram”。
但是，当我使用 select 标签时，为什么会有额外的输入文本字段？
当我删除“选择”时，输入字段消失。
我只希望数据列表与里面的值一起出现。
<: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
选项标签可以在 select 标签或数据列表标签中。 因此，您不需要两者。 当您获取数据列表时，您可以直接从输入中获取想要的值。
工作示例：
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>
如果您只想查看选项说明和要隐藏的数值，您可以将它们保存为数据属性。 您可以使用普通值作为选择器来获取它们。
工作示例：
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>
您可以使用onclick和第二个 function 重置输入，将输入的值设置为空字符串： document.getElementById("list_input").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>
此外，您可以将事件侦听器onchange和onclick直接放在脚本中。 在这种情况下，您可以轻松添加更多侦听器，例如keyup以捕获 Escape 键。
工作示例：
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
我希望它与此示例完全相同，只是将值与脚本一起复制到 textarea 中。
因为在此示例中，您可以将输入字段用作搜索栏:)
<: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>
在javascript中获取textarea html的值
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.