获取选定对象的 data-* 属性<option value=""></option>

Question

我正在尝试使用 document.get.elementbyId 获取选项标签的第二个值。

 <select id="test" class="form-control"> <option value="">-- Select --</option> <option value="1" data-doj="20-06-2011">John</option> <option value="2" data-doj="10-05-2015">Clif</option> <option value="3" data-doj="01-01-2008">Alexander</option> </select>

通常，我会使用document.getElementById("test").value; 获得一个选项的价值。 如果我在这种情况下有多个值，我该怎么办？ document.getElementById("test").data-doj; ? 谢谢你。

Answer 1

使用HTMLSelectElement.selectedIndex

HTMLSelectElement.selectedIndex 是一个 long 值，它反映了第一个或最后一个选定元素的索引，具体取决于 multiple 的值。 值 -1 表示未选择任何元素。

要访问data-*属性，请使用dataset

注意 - 事件处理程序中的this是指事件被调用的元素。

 let select = document.getElementById("test"); select.onchange = function() { let selectedI = this.selectedIndex; console.log(this.options[selectedI].dataset.doj) };

 <select id="test" class="form-control"> <option value="">-- Select --</option> <option value="1" data-doj="20-06-2011">John</option> <option value="2" data-doj="10-05-2015">Clif</option> <option value="3" data-doj="01-01-2008">Alexander</option> </select>

Answer 2

像这样

使用 selectedIndex 导航

 document.getElementById("test").addEventListener("change",function() { const opt = this.options[this.selectedIndex]; console.log(opt.value, opt.getAttribute("data-doj"), // or opt.dataset.doj opt.text) })

 <select id="test" class="form-control"> <option value="">-- Select --</option> <option value="1" data-doj="20-06-2011">John</option> <option value="2" data-doj="10-05-2015">Clif</option> <option value="3" data-doj="01-01-2008">Alexander</option> </select>

Answer 3

奇怪的是，仍然没有人建议。

有一种方法可以使用HTMLSelecteElement.selectedOptions HTMLCollection 如果您一次只选择了一个<option> ，您可以简单地拉出它的第一个元素（使用[0] ）。

要访问data-*属性，有一个正确的 API ，这意味着.dataset['propertyname']种语法：

 document.getElementById('test').addEventListener('change', function(){ const [selectedOption] = this.selectedOptions, dataDoj = selectedOption.dataset.doj console.log(dataDoj) })

 <select id="test" class="form-control"> <option value="">-- Select --</option> <option value="1" data-doj="20-06-2011">John</option> <option value="2" data-doj="10-05-2015">Clif</option> <option value="3" data-doj="01-01-2008">Alexander</option> </select>

Answer 4

请参阅下面的工作示例，如何获取所选选项的值、文本和自定义属性 -

 function trackValue(){ var element = document.getElementById("test"); var option_value = element.options[element.selectedIndex].value; var option_text = element.options[element.selectedIndex].text; var option_doj = element.options[element.selectedIndex].getAttribute('data-doj') console.log('value-', option_value); console.log('text-', option_text); console.log('doj-', option_doj); }

 <select id="test" class="form-control" onChange="trackValue();"> <option value="">-- Select --</option> <option value="1" data-doj="20-06-2011">John</option> <option value="2" data-doj="10-05-2015">Clif</option> <option value="3" data-doj="01-01-2008">Alexander</option> </select>