JSFiddle - React, Tailwind, and code Playground

HTML

<select name="my_select" class="sel"></select>
<div class="box"></div>

CSS

.box p {
  display: none;
  font-size: 500%;
}

JavaScript

let data = [
  {name: 'foo'},
  {name: 'bar'},
  {name: 'hello'},
  {name: 'world'},
]

$('.sel').html(data.map(d=>`<option value="${d.name}">${d.name}</option>`))
$('.box').html(data.map(d=>`<p class="${d.name}">${d.name}</p>`))

$('.sel').on('change', function() {
  $('.box .'+this.value).slideDown().siblings().hide()
})