JSFiddle - React, Tailwind, and code Playground

HTML

<select id="select">
<option value="1" data-foo="dogs">this</option>
<option value="2" data-foo="cats">that</option>
<option value="3" data-foo="gerbils">other</option>
</select>

<p>The selected item is <span id="text"></span> with a value of <span id="value"></span> and foo of <span id="foo"></span>.</p>

CSS

span { font-family:monospace; color:#393 }
span:before { content:"'" }
span:after { content:"'" }

JavaScript

var sel = document.getElementById('select');
var t = document.getElementById('text');
var v = document.getElementById('value');
var f = document.getElementById('foo');
sel.onchange = function(){
    var selected = sel.options[sel.selectedIndex];
    t.innerHTML = selected.text;
    v.innerHTML = sel.value;
    f.innerHTML = selected.getAttribute('data-foo');
};
sel.onchange();