JSFiddle - React, Tailwind, and code Playground

by Eddie19

HTML

<select id="button1" class="button" title="Button 1" onchange="getDropDownVal()">
  <option value="0">--Please choose an option for the first blank--</option>
  <option id="buttonText1_1" class="buttonText" value="1">Banana</option>
  <option id="buttonText1_2" class="buttonText" value="2">Apple</option>
  <option id="buttonText1_3" class="buttonText" value="3">Grape</option>
  <option id="buttonText1_4" class="buttonText" value="4">Peach</option>
  <option id="buttonText1_5" class="buttonText" value="5">Melon</option>
  <option id="buttonText1_6" class="buttonText" value="6">Pineapple</option>
</select>

CSS

.button {
  text-align: center;
  background-color: #F8F8F8;
  border: 2px solid #EAEAEA;
  border-radius: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  max-width: 500px;
  min-height: 65px !important;
}

JavaScript

function getDropDownVal() {
  document.getElementById("button1").onchange = function() {
    alert(this.value);
    return false;
  }
}