Javascript 如何获取数据列表选项 ID 并分配给输入数据属性

发布于05月28日

我不知道如何用jQuery或JavaScript编写这段代码，希望有人能帮助我实现这一逻辑.

我的目标是，当我 Select DataList选项时，我希望获得所选选项的属性ID，并使其值为data-set.

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

例如，我 Select 属性为ID的Adams 那么输入的输出现在是:

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

推荐答案

您可以使用addEventListener将input事件附加到元素，这样就可以获取和设置元素的属性属性.

您可以try 以下方式:

const cityInput = document.getElementById('city');
const cityListOptions = document.querySelectorAll('#citylist > .citydata');

//attach the event
cityInput.addEventListener('input', function() {
  console.clear(); //clear the console
  //get the selected option
  const selectedOption = [...cityListOptions].find(option => option.value === cityInput.value);
  //check if selectedOption is truthy
  if (selectedOption) {
    //get and set the property
    cityInput.dataset.set = selectedOption.id;
    cityInput.setAttribute('value', selectedOption.value);
  }    
  console.log(document.getElementById('city')); //test
});

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