无需JavaScript能否修改<datalist>值及实现选值显示对应文本？

嘿，咱直接说结论和原因哈：

1. 不用JavaScript能不能修改<datalist>的数值与数据？ #

不行哦。纯HTML层面的<datalist>是静态的，它的选项内容是写死在代码里的，没有原生的HTML机制能让你在页面运行过程中动态修改这些选项的数值或数据。如果要修改，必须借助JavaScript来操作DOM元素才行。

2. 选择选项“1”时输入框显示“ONE”，无需JavaScript能否实现？ #

同样做不到。<datalist>的原生逻辑是：用户选择哪个选项，输入框里就会显示该选项的可见文本（也就是你代码里<option>标签中间的内容，比如“1”“2”）。你加的data-value是自定义属性，HTML原生根本不会识别这个属性，也不会自动把它的值同步到输入框里。

如果要实现这个效果，必须用JavaScript来监听输入框的选择/输入事件，当用户选中选项时，把对应选项的data-value值赋值给输入框。举个简单的实现例子：

document.getElementById('test').addEventListener('input', function(e) {
  const selectedOption = Array.from(document.getElementById('browsers').options).find(opt => opt.text === e.target.value);
  if (selectedOption) {
    e.target.value = selectedOption.dataset.value;
  }
});

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