JSFiddle - React, Tailwind, and code Playground

by Blitzilla

HTML

<title> Hot Buns </title>
<div>
  <h2> Welcome to Hot Buns </h2>
  <h3> Ham can we bee'f service? </h3>
</div>
<div>
  <h2> Place an order </h2>
</div>
<form method="get" id="frmOder">
  <select id="slctOrder">
    <option hidden selected="selected" value="0"> please select one of today's specials </option>
    <option value="1"> Last of the Mo-jicama </option>
    <option value="2"> Cheesus Is Born Burger </option>
    <option value="3"> Beets of Burden Burger </option>
    <option value="4"> Paranormal Pepper Jack-tivity Burger </option>
  </select>

  <output id="Details" />
</form>

JavaScript

console.clear();
var el = document.getElementById("slctOrder");

el.addEventListener("change", showDetails, false);

function showDetails(event) {
  console.log(event);
  var x = event.srcElement;
  var val = x.options[x.selectedIndex].text;

  var t = event.srcElement.selectedOptions[0].text;
  document.getElementById("Details").value = t;
}