选择值时如何更改

Question

如果用户选择了不同的选项，我想更改结果。结果是我从 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>

这个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>

这就是触发

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

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

我期望选择 t_sediam 时的输出，输出为 A。选择 t_brg，输出为 B

Answer 1

这是一种不同的方法，使用事件委托。这非常适合基于数据的场景。

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>

Answer 2

还有更简单的做法：

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>

我猜你是否想分解可能性？

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>

?