英文:
how to get the datalist option id and assign to the input data attributes
问题
我不知道如何在jQuery或JavaScript中编写此代码，希望有人可以帮助我实现这个逻辑。
我的目标是，当我选择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>
例如，我选择具有ID属性的Adams，那么现在输入的输出将是：
<input type="text" id="city" data-set="012801000" value="Adams" list="citylist" name="city" required>
英文:
I don't know how to write this code in jQuery or JavaScript hoping that someone can help me reach this logic.
My goal is when I select the datalist option I want to get the attribute ID of the selected option and make it to the value of 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>
For example, I select the Adams with the attribute of ID
Then the output of the input now is:
<input type="text" id="city" data-set="012801000" value="Adams" list="citylist" name="city" required>
答案1
得分: 1
你可以使用 addEventListener 将 input 事件附加到元素上，以便获取并设置元素的属性。
你可以尝试以下方法：
const cityInput = document.getElementById('city');
const cityListOptions = document.querySelectorAll('#citylist > .citydata');
// 附加事件
cityInput.addEventListener('input', function() {
console.clear(); // 清空控制台
// 获取选定的选项
const selectedOption = [...cityListOptions].find(option => option.value === cityInput.value);
// 检查 selectedOption 是否为真
if (selectedOption) {
// 获取并设置属性
cityInput.dataset.set = selectedOption.id;
cityInput.setAttribute('value', selectedOption.value);
}
console.log(document.getElementById('city')); // 测试
});
<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>
英文:
You can attach the input event to the element using addEventListener so that you can get and set the attribute property of the element.
You can try the following way:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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
});
<!-- language: lang-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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论