JSFiddle - React, Tailwind, and code Playground

by Barry Peterson

HTML

<div class="sweet-selector">
<label for="favorite-ride">Favorite Ride</label>
   <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
    <option value="other">Other</option>
  </select>
  <input type="text" class="other" placeholder="Favorite Ride">
</div>

SCSS

.sweet-selector {
  .other {
    display: none;
  }
}


/* Icing on the cake */
.sweet-selector {
  font-family: 'Arial';
  font-size: 1em;
  
  label {
    display: block;
    margin-bottom: 10px;
  }
  
  input {
    padding: 5px 10px;
  }
}

JavaScript

const $component = $('.sweet-selector');
const $selectInput = $component.find('select');
const $textInput = $component.find('.other');

$('select').change((e) => {
	const selectValue = e.currentTarget.value;
  
  if (selectValue === 'other') {
  	$selectInput.hide();
    $textInput.show();
  }
})