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

there is more simple to do:

 document.getElementById('categories').onchange = function() { document.getElementById('admDivCheck').style.display = (this.value=='t_sediam') ? "block" : "none"; document.getElementById('tbarang').style.display = (this.value=='t_brg') ? "block" : "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" style="display:none;">A</div> <div id="tbarang" style="display:none;">B</div> 

I guess if you want to factorize the possibilities ?

 const SelCategorie = document.getElementById('categories'), elmDisplay = document.querySelectorAll('.ClassTabels'); SelCategorie.onchange = function() { for (let i = 0; i < elmDisplay.length; i++ ) { elmDisplay[i].style.display = (elmDisplay[i].id === this.value ) ? 'block' : 'none'; } } 

 .ClassTabels { display: none; } 

 <select name="categories" id="categories" class="form-control"> <option >Tabel</option> <option value="admDivCheck">Tabel Sedia</option> <option value="tbarang">Tabel Barang</option> <option value="truc">Tabel truc</option> <option value="bidule">Tabel bidule</option> </select> <div id="admDivCheck" class="ClassTabels">A</div> <div id="tbarang" class="ClassTabels">B</div> <div id="truc" class="ClassTabels">C</div> <div id="bidule" class="ClassTabels">D</div> 

?

Answer 2

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>