Question

如果用户选择其他选项，我想更改结果。结果是我从数据库获得的表

<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

做起来更简单：

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>

？

Answer 2

这是一种不同的方法，并使用事件委托。这是基于数据的方案的理想选择。

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>

选择值时如何更改

2 个答案: