Как изменить, когда значение выбрано - PullRequest
Новая
       26

Как изменить, когда значение выбрано

0 голосов
/ 13 мая 2019

Я хочу изменить результат, если пользователи выбрали другую опцию. В результате получается таблица, которую я получаю из 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

Ответы [ 2 ]

0 голосов
/ 13 мая 2019

Это другой подход, использующий делегирование событий.Что идеально подходит для сценариев, основанных на данных. 

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>
0 голосов
/ 13 мая 2019

тут проще сделать: 

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>

...