How to change when value get selected

Question

I want to change the result if users selected different option. The result is a table that i get from db

<select name="categories" id="categories" onchange="admSelectCheck(this);" class="form-control">
<option >Tabel</option>
<option value="t_sediam">Tabel Sedia</option>
<option value="t_brg">Tabel Barang</option>     
</select>

This JS

function admSelectCheck(nameSelect)
{
    console.log(nameSelect);
    if(nameSelect){
        admOptionValue = document.getElementById("categories").value;
        if(admOptionValue == "t_sediam"){
            document.getElementById("admDivCheck").style.display = "block";
        }
        else{
            document.getElementById("admDivCheck").style.display = "none";
        }
    }
    else{
        document.getElementById("admDivCheck").style.display = "none";
    }


    console.log(nameSelect);
    if(nameSelect){
        admOptionValue = document.getElementById("categories").value;
        if(admOptionValue == "t_brg"){
            document.getElementById("tbarang").style.display = "block";
        }
        else{
            document.getElementById("tbarang").style.display = "none";
        }
    }
    else{
        document.getElementById("tbarang").style.display = "none";
    }
}
</script>

And this is the triggered

<div id="admDivCheck" style="display:none;">
<?php echo"A"; ?>

<div id="tbarang" style="display:none;">
<?php echo"B"; ?>

I expected the output when t_sediam selected, the output is A. And t_brg selected, the output is B

Answer 1

This is a different approach and uses event delegation. Which is ideal for data based scenarios.

const showData = (showID) => {
  // Hide evenrything
  document.querySelectorAll('.displayData').forEach(d => d.style.display = 'none');
  
  const showEl = document.querySelector(`#${showID}`);
  if(showEl) showEl.style.display = 'block';
}

document.addEventListener('change', (e) => {
  if(e.target.matches('#categories')) {
    switch(e.target.value) {
      case 't_sediam':
        showData('admDivCheck');
        break;
      case 't_brg':
        showData('tbarang');
        break;
      default:
        showData();
    }
  }
});

.displayData {
  display: none;
}

<select name="categories" id="categories" class="form-control">
<option >Tabel</option>
<option value="t_sediam">Tabel Sedia</option>
<option value="t_brg">Tabel Barang</option>     
</select>

<div id="admDivCheck" class="displayData">
   <p>HERE IS SOME DATA</p>
</div>


<div id="tbarang" class="displayData">
  <p>Here is DIFFERENT Data</p>
</div>