时间戳

首页 > 解决方案 > HTML datalist 将值放入 textarea

javascript - HTML datalist 将值放入 textarea

问题描述

我想从数据列表中获取值并将其显示在文本区域中。
因此我使用了脚本“selectProgram”。
但是，当我使用选择标签时，为什么会有一个额外的输入文本字段？
当我删除“选择”时，输入字段消失。
我只希望数据列表与里面的值一起出现。

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

标签： javascripthtml

解决方案

选项标签可以在选择标签或数据列表标签中。因此，您不需要两者。当您获取数据列表时，您可以直接从输入中获取想要的值。

工作示例：

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第二个函数重置输入，该函数将输入的值设置为空字符串：document.getElementById("list_input").value = '';如果您也想重置 textarea，那么也在第二个函数中重置它们的值：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>

推荐阅读