获取所选 <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.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

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

有一种方法可以使用 访问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(){ 

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>