JSFiddle - React, Tailwind, and code Playground

HTML

<select id="target">
    <option value="default_content">--choose--</option>
    <option value="content_1">Content 1</option>
    <option value="content_2">Content 2</option>
    <option value="content_3">Content 3</option>
    <option value="content_4">Content 4</option>
</select>

<div id="default_content" class="vis">
    default stuff
</div>

<div id="content_1" class="inv">
    content 1 stuff
</div>

<div id="content_2" class="inv">
    content 2 stuff
</div>

<div id="content_3" class="inv">
    content 3 stuff
</div>

<div id="content_4" class="inv">
    content 4 stuff
</div>

CSS

.vis {display: block;}
.inv {display:none;}

JavaScript

var elTarget = document.getElementById('target');

elTarget.addEventListener('change', function (e) {
    setContent(e.target.value);
});

setSelectedIndex(document.getElementById('target'), 'content_1');

//FUNCTIONS

function setSelectedIndex(s, valsearch) {
    // Loop through all the items in drop down list
    for (i = 0; i < s.options.length; i++) {
        if (s.options[i].value == valsearch) {
            // Item is found. Set its property and exit
            s.options[i].selected = true;
            break;
        }
    }
    setContent(valsearch);
    return;
}

function setContent(id) {
  //get the current visible content
   var vis = document.querySelector('.vis');
  //get the target element by id
   var target = document.getElementById(id);
  //make current vis element inv
   if (vis) vis.className = "inv";
  //make target element vis
   if (target) target.className = 'vis';
}