Скрытые div появляются в таблице выбора - PullRequest
Новая
       0

Скрытые div появляются в таблице выбора

0 голосов
/ 01 октября 2018

У меня есть страница с формой, и вопросы этих форм задаются в двух отдельных таблицах.Я хочу, чтобы вторая таблица отображалась только в том случае, если в первой таблице выбраны Один, Два или Три, и по умолчанию она невидима.Если снова выбрать ноль, таблица 2 снова исчезнет.

Мне удалось частично поработать с приведенным ниже кодом, однако я думаю, что мой сценарий отменяет друг друга.Я могу заставить его работать с One, Two или Three, но не со всеми тремя вариантами выбора.В этом случае таблица 2 появляется только тогда, когда я выбираю «Три», и ничего не происходит при выборе «Ноль», «Один» и «Два».

Как мне изменить скрипт, чтобы он появлялся при выборе «Один», «Два» или «Три» и исчезал при повторном выборе «Ноль».

<table>
  <tr>
    <td>Numbers</td>
    <td>
      <select id="numbers" name="numbers">
         <option value="Zero" selected>0</option>
         <option value="One">1</option>
         <option value="Two">2</option>
         <option value="Three">3</option>
       </select>
    </td>
  </tr>
</table>

<span id="animals" style="display: none;"> 
  <table>
       <tr>
           <td>Animal</td>
           <td>
              <select id="animal" input name="animal">
                  <option value="Dog">Dog</option>
                  <option value="Cat">Cat</option>
                  <option value="Rabbit">Rabbit</option>
              </select>
         </td>
      </tr>
  </table>
</span>

<script>
document.getElementById('numbers').addEventListener('change', function () {
    var style = this.value == 'One' ? 'inline' : 'none';
    document.getElementById('animals').style.display = style;
});
document.getElementById('numbers').addEventListener('change', function () {
    var style = this.value == 'Two' ? 'inline' : 'none';
    document.getElementById('animals').style.display = style;
});
document.getElementById('numbers').addEventListener('change', function () {
    var style = this.value == 'Three' ? 'inline' : 'none';
    document.getElementById('animals').style.display = style;
});
</script>

Ответы [ 2 ]

0 голосов
/ 01 октября 2018

с использованием массива, проверьте фрагмент кода. 

<html>
<body>
<table>
  <tr>
    <td>Numbers</td>
    <td>
      <select id="numbers" name="numbers">
         <option value="Zero" selected>0</option>
         <option value="One">1</option>
         <option value="Two">2</option>
         <option value="Three">3</option>
       </select>
    </td>
  </tr>
</table>

<span id="animals" style="display: none;"> 
  <table>
       <tr>
           <td>Animal</td>
           <td>
              <select id="animal" input name="animal">
                  <option value="Dog">Dog</option>
                  <option value="Cat">Cat</option>
                  <option value="Rabbit">Rabbit</option>
              </select>
         </td>
      </tr>
  </table>
</span>
<script>

function checkVals(val){
  if(!val) {
    val = document.getElementById('numbers').value;
  }
 
var allowed = ["One", "Two", "Three"];
var check = allowed.includes(val);

if(check){
   document.getElementById('animals').style.display = 'block';
}else{
   document.getElementById('animals').style.display = 'none';
}

}

document.getElementById('numbers').addEventListener('change', function () {
var val = this.value;
checkVals(val);

});


window.onload="checkVals()";


</script>
</body>
</html>
0 голосов
/ 01 октября 2018

Вам не нужно писать три прослушивателя событий.Только один может сделать это. 

 document.getElementById('numbers').addEventListener('change', function () {
var style = (this.value == 'One' || this.value == 'Two' || this.value =='Three')  && (this.value != 'Zero') ? 'inline' : 'none';
document.getElementById('animals').style.display = style;
 });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...