Скрыть параметры выпадающего меню в зависимости от выбранной радиокнопки, а также от загрузки страницы - PullRequest
Новая
       8

Скрыть параметры выпадающего меню в зависимости от выбранной радиокнопки, а также от загрузки страницы

0 голосов
/ 05 февраля 2019

У меня есть форма с переключателями и выпадающим списком.

Если пользователь выбирает «девочек», я хочу отображать только карисы и шахматы, как указано в переменной girlsGames.

Если пользователь выбирает мальчиков, я хочу показать раскрывающиеся опции для переменной boysGames.

Вот мой код: 

<form action="">
    <label for="boys"><input type="radio" id="boys" name="gender" value="boys">Boys</label>
    <label for="girls"><input type="radio" id="girls" name="gender" value="girls">Girls</label>
    <select name="games" id="">
    <option value="">select games</option>
    <option value="caroms">Caroms</option>
    <option value="chess">Chess</option>
    <option value="football">Football</option>
    <option value="rugby">Rugby</option>
    </select>
  </form>
    <script>
    var girlsGames = ['caroms', 'chess'];
            $('input:radio').change(function(event) {

          });
    </script>

1 Ответ

0 голосов
/ 05 февраля 2019

Это один из многих подходов, основанный на добавлении классов к определенным параметрам и скрытии / отображении всех параметров: 

var girlsGames = ['caroms', 'chess'];
            $('input:radio').change(function(event) {
             
              if(event.target.value == 'girls') {
                 $('option').hide();
                 $('.girls').show();
              } else if (event.target.value == 'boys'){
                 $('option').show();
              }
              
          });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
    <label for="boys"><input type="radio" id="boys" name="gender" value="boys">Boys</label>
    <label for="girls"><input type="radio" id="girls" name="gender" value="girls">Girls</label>
    <select name="games" id="">
    <option value="" class="girls">select games</option>
    <option value="caroms" class="girls">Caroms</option>
    <option value="chess" class="girls">Chess</option>
    <option value="football">Football</option>
    <option value="rugby">Rugby</option>
    </select>
  </form>
...