I'm trying to get the second value of an option tag using 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>

I'm trying to get the second value of an option tag using 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>

Usually, I would use document.getElementById("test").value; to get the value of one option. What should I do if I have multiple values like in this case? document.getElementById("test").data-doj;? Thank you.

• javascript
• html

• there's an API to access data-* attributes, you may check out the example for your use case over here – Yevhen Horbunkov Commented Apr 16, 2020 at 10:09

4 Answers 4

Use HTMLSelectElement.selectedIndex

The HTMLSelectElement.selectedIndex is a long that reflects the index of the first or last selected element, depending on the value of multiple. The value -1 indicates that no element is selected.

To access data-* attributes, use dataset

Note - this in event-handler refers to the element on an event is invoked.

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>

Like this

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

Strangely, no one still suggested.

There's a way to access HTMLCollection of the selected options with HTMLSelecteElement.selectedOptions. If you have only one <option> selected at a time, you may simply pull its first element (with [0]).

To access data-* attribute there's a proper API, which implies .dataset['propertyname'] kind of syntax:

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>

Please see the working example below, How you can get value, text and custom attribute of selected option -

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>