JSFiddle - React, Tailwind, and code Playground

by Santosh Thakur

HTML

<select name="" id="selectData"></select>


<div class="name">Here is Name</div>
<div class="country">Here is Country</div>
<div class="state">Here is State</div>
<div class="city">Here is City</div>

CSS

.name,
.country,
.state,
.city {
  display: none
}

JavaScript

var arr = ['Name', 'Country', 'State', 'City'];
var selectData = $('#selectData');

$(arr).each(function(i, e) {
  var opt = $('#selectData').find('option.value').text();
  selectData.append($('<option>').text(e).val(e));
});


$('#selectData').change(function() {
  var selected = $(this).find('option:selected');
  //alert(selected.val() + ' ' + selected.text());
  $(this).siblings().hide();
  if (selected.val() === 'Name') {
    $('.name').show();
  }
  if (selected.val() === 'Country') {
    $('.country').show();
  }
  if (selected.val() === 'City') {
    $('.city').show();
  }
  if (selected.val() === 'State') {
    $('.state').show();
  }
});