JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form">
  <div>
    <label for="name">Height:</label>
    <select id="height">
      <option>- Select class -</option>
      <option value="height133">133</option>
      <option value="height55">55</option>
      <option value="otherclass">127</option>
    </select>
  </div>
  <button type="button" id="go">Submit</button>
</form>
<div class="gridbox otherclass1 otherclass2">
  <div></div>
</div>

CSS

.gridbox {
  height: 100px;
  width: 200px;
  border: 1px solid #ccc;
}

.height133 {
  border: 1px solid red;
}

.height55 {
  border: 1px solid blue;
}

JavaScript

$("#go").click(function() {
  var heightElem = $("#height");
  var height =
    heightElem.find("option[value]:selected").val();
  var allClassess = heightElem.find("option[value]").map(function() {
    return this.value ? this.value : null;
  }).get().join(' ')
  $(".gridbox").removeClass(allClassess).addClass(height);
});