如何获取datalist选项ID并赋值给input的data-set属性

需要实现以下逻辑：当选中<datalist>中的选项时，获取该选项的id属性，并将其赋值给对应<input>元素的data-set属性。现有HTML代码如下：

<input type="text" id="city" data-set="" list="citylist" name="city" required>
<datalist id="citylist">
    <option class="citydata" id="012801000">Adams</option>
    <option class="citydata" id="012802000">Bacarra</option>
    <option class="citydata" id="012803000">Badoc</option>
</datalist>

例如，选中ID为012801000的Adams选项后，input元素应变为：

<input type="text" id="city" data-set="012801000" value="Adams" list="citylist" name="city" required>

原生JavaScript实现 #

由于<datalist>没有专门的选中事件，我们可以监听<input>的input事件，在用户选择选项或输入内容时触发逻辑：

const cityInput = document.getElementById('city');
const cityList = document.getElementById('citylist');

cityInput.addEventListener('input', function() {
  const selectedValue = this.value;
  // 从datalist中找到文本匹配的选项
  const matchedOption = Array.from(cityList.options).find(opt => opt.textContent === selectedValue);
  
  if (matchedOption) {
    // 将选项的id赋值给input的data-set属性
    this.dataset.set = matchedOption.id;
  } else {
    // 无匹配项时清空data-set
    this.dataset.set = '';
  }
});

jQuery实现 #

思路和原生JS一致，利用jQuery的事件监听和DOM筛选方法：

$('#city').on('input', function() {
  const selectedValue = $(this).val();
  // 筛选出文本匹配的选项
  const matchedOption = $('#citylist option').filter(function() {
    return $(this).text() === selectedValue;
  });
  
  if (matchedOption.length) {
    // 设置data-set属性
    $(this).attr('data-set', matchedOption.attr('id'));
    // 若使用jQuery的data方法，注意data()会缓存值，DOM属性不会同步更新，按需选择
    // $(this).data('set', matchedOption.attr('id'));
  } else {
    $(this).attr('data-set', '');
  }
});

注意：如果用户手动输入的内容和datalist中选项文本完全一致，也会触发赋值逻辑；若不需要这种情况，可以调整匹配逻辑（比如结合change事件，但change事件需要input失去焦点才触发）。

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