JSFiddle - React, Tailwind, and code Playground

by hcanning2012

HTML

<select id="courses">
  <option value="" selected disabled>Please Choose</option> 
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<h1 id="courseSelected"></h1>

JavaScript

//target the element
var sel = document.querySelector('#courses');

//attach the event
sel.addEventListener('change', function(){
  //get and set the value
 if (document.getElementById('courses').value != ""){ 
  document.querySelector('#courseSelected').textContent = this.options[this.selectedIndex].text;
  }
});

// execute the event on page load
var event = new Event('change');
sel.dispatchEvent(event);