获取所选 <option> 的 data-* 属性

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.selectedIndexHTMLSelectElement.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() {&nbsp; const opt = this.options[this.selectedIndex];&nbsp; console.log(opt.value,&nbsp;&nbsp; &nbsp; opt.getAttribute("data-doj"),&nbsp; // or opt.dataset.doj&nbsp; &nbsp; opt.text)})<select id="test" class="form-control">&nbsp; <option value="">-- Select --</option>&nbsp; <option value="1" data-doj="20-06-2011">John</option>&nbsp; <option value="2" data-doj="10-05-2015">Clif</option>&nbsp; <option value="3" data-doj="01-01-2008">Alexander</option></select>

Answer 3

奇怪的是，仍然没有人提出建议。有一种方法可以使用 访问HTMLCollection所选选项HTMLSelecteElement.selectedOptions。<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(){&nbsp;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"&nbsp; data-doj="20-06-2011">John</option><option value="2"&nbsp; data-doj="10-05-2015">Clif</option><option value="3"&nbsp; data-doj="01-01-2008">Alexander</option>&nbsp; &nbsp; &nbsp; &nbsp; </select>