新手向：获取datalist选中项文本或用户输入文本并存入变量

针对你的需求，用几行JavaScript就能轻松实现，直接看完整代码和说明：

完整可运行代码 #

<input type="text"  id="input-color" list="color" autocomplete="off" required >
<datalist id="color">
<option>WHITE</option>
<option>BLACK</option>
<option>BLUE</option>
<option value=" ">(Please, inform some color.)</option>
</datalist>

<script>
// 获取页面上的输入框元素
const inputColor = document.getElementById('input-color');

// 监听输入框的输入事件（选下拉选项、手动打字都会触发）
inputColor.addEventListener('input', function(inputEvent) {
  // 拿到输入框当前的内容
  const inputValue = inputEvent.target.value;
  // 在datalist里找和输入内容匹配的选项
  const matchedOption = document.querySelector(`#color option[value="${inputValue}"]`);
  
  // 最终要存入变量的内容
  let selectedContent;
  if (matchedOption) {
    // 找到匹配选项，取选项显示的文本
    selectedContent = matchedOption.textContent;
  } else {
    // 没找到匹配项，直接用用户输入的内容
    selectedContent = inputValue;
  }
  
  // 打开浏览器控制台可以查看结果，确认是否正确
  console.log('最终获取的内容：', selectedContent);
  // 后续你就可以用selectedContent这个变量做其他操作了
});
</script>

关键说明 #

• 用input事件的原因：这个事件会实时响应用户的操作（选选项、打字输入），比需要输入框失去焦点才触发的change事件更贴合需求。
• 特殊选项处理：那个标注(Please, inform some color.)的选项设置了value=" "，当用户选中它时，代码会自动匹配到该选项，把显示的文本存入变量，而不是存空格。
• 新手友好：代码每一步都加了注释，直接复制就能运行，不需要额外配置。

内容的提问来源于stack exchange，提问作者Mark