Блог

Главная - Вопросы по программированию - jquery — показывать / скрывать элементы на основе значений выбора и переключателей

jquery — показывать / скрывать элементы на основе значений выбора и переключателей

#jquery #event-handling #show-hide

#jquery #обработка событий #показать-скрыть

Вопрос:

Мне нужно отображать различные комбинации divs, основанные как на выборе пользователем опции из выпадающего списка, так И на переключателе. Переключатели появятся, как только будет выбрано значение из выпадающего списка, затем появятся флажки в зависимости от значения параметра радио.

Например:

  • «вариант 1» и «Да» будут отображать содержимое полей 1 и 4
  • «вариант 1» и «Нет» будут отображать содержимое 2 и 3
  • «вариант 2» и «Нет» будут отображать поле содержимого и 4

Мы используем jquery, и я могу отображать параметры радио, но я понятия не имею, как отображать поля на основе двух значений.

 (function() {

  function runOffer() {

    // Show/hide radio buttons
    $('#selectOption').change(function() {
      $('.radio-btnWrapper').show();
    });

  }

  var checkJQ = window.setInterval(function() {
    if (typeof $ !== 'undefined') {
      window.clearInterval(checkJQ);
      runOffer();
    }
  }, 50);
})();  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectOption" class="Input marginBottom--x2">
  <option value="">Please select...</option>
  <option value="a">Option A</option>
  <option value="b">Option B</option>
  <option value="c">Option C</option>
  <option value="d">Option D</option>
  <option value="e">Option E</option>
</select>
<div class="radio-btnWrapper" style="display: none;">
  <p class="Type--colourLight Type--bold">Can your car be safely driven?</p>
  <div class="Radio-btnGroup">
    <label class="Radio Radio-btn widthSmaller">
            <input type="radio" name="radiocheck-radioBtnGroup" value="Yes" class="Radio-input">
            <i class="Radio-icon"></i>
            <span class="Radio-text">Yes</span>
        </label><label class="Radio Radio-btn widthSmaller">
            <input type="radio" name="radiocheck-radioBtnGroup" value="No" class="Radio-input">
            <i class="Radio-icon"></i>
            <span class="Radio-text">No</span>
        </label>
  </div>
</div>
</div>
<div class="Box Box--light boxShadow--medium noBorder padding--x3 radiusSmall contentBox1" style="display: none;">
  <p class="Type--bold uppercase marginBottom">Content Box 1</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat sem quis augue varius porta.</p>
</div>
<div class="Box Box--light boxShadow--medium noBorder padding--x3 radiusSmall contentBox2" style="display: none;">
  <p class="Type--bold uppercase marginBottom">Content Box 2</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat sem quis augue varius porta.</p>
</div>
<div class="Box Box--light boxShadow--medium noBorder padding--x3 radiusSmall contentBox3" style="display: none;">
  <p class="Type--bold uppercase marginBottom">Content Box 3</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat sem quis augue varius porta.</p>
</div>
<div class="Box Box--light boxShadow--medium noBorder padding--x3 radiusSmall contentBox4" style="display: none;">
  <p class="Type--bold uppercase marginBottom">Content Box 4</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat sem quis augue varius porta.</p>
</div>

Любая помощь была бы потрясающей!

Комментарии:

1. Поместите обработчик событий на переключатели, чтобы отобразить соответствующий DIV на основе комбинации.

Ответ №1:

Напишите функцию, которая отображает соответствующие поля содержимого на основе значений выпадающего списка и переключателей. Затем вызовите его из обработчиков изменений для них обоих.

 (function() {

  function showContents() {
    let select = $("#selectOption").val();
    let radio = $(".Radio-input:checked").val();
    $(".Box").hide(); // hide all the boxes first, then show based on the selections
    if (select == "a" amp;amp; radio == 'Yes') {
      $(".contentBox1, .contentBox4").show();
    } else if (select == "a" amp;amp; radio == 'No') {
      $(".contentBox2, .contentBox3").show();
    } else if (select == 'b' amp;amp; radio == 'Yes') {
      $(".contentBox4").show();
    }
  }

  $('#selectOption').change(function() {
    $('.radio-btnWrapper').show();
    showContents();
  });

  $(".Radio-input").change(function() {
    showContents();
  });
})();  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectOption" class="Input marginBottom--x2">
  <option value="">Please select...</option>
  <option value="a">Option A</option>
  <option value="b">Option B</option>
  <option value="c">Option C</option>
  <option value="d">Option D</option>
  <option value="e">Option E</option>
</select>
<div class="radio-btnWrapper" style="display: none;">
  <p class="Type--colourLight Type--bold">Can your car be safely driven?</p>
  <div class="Radio-btnGroup">
    <label class="Radio Radio-btn widthSmaller">
            <input type="radio" name="radiocheck-radioBtnGroup" value="Yes" class="Radio-input">
            <i class="Radio-icon"></i>
            <span class="Radio-text">Yes</span>
        </label><label class="Radio Radio-btn widthSmaller">
            <input type="radio" name="radiocheck-radioBtnGroup" value="No" class="Radio-input">
            <i class="Radio-icon"></i>
            <span class="Radio-text">No</span>
        </label>
  </div>
</div>
</div>
<div class="Box Box--light boxShadow--medium noBorder padding--x3 radiusSmall contentBox1" style="display: none;">
  <p class="Type--bold uppercase marginBottom">Content Box 1</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat sem quis augue varius porta.</p>
</div>
<div class="Box Box--light boxShadow--medium noBorder padding--x3 radiusSmall contentBox2" style="display: none;">
  <p class="Type--bold uppercase marginBottom">Content Box 2</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat sem quis augue varius porta.</p>
</div>
<div class="Box Box--light boxShadow--medium noBorder padding--x3 radiusSmall contentBox3" style="display: none;">
  <p class="Type--bold uppercase marginBottom">Content Box 3</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat sem quis augue varius porta.</p>
</div>
<div class="Box Box--light boxShadow--medium noBorder padding--x3 radiusSmall contentBox4" style="display: none;">
  <p class="Type--bold uppercase marginBottom">Content Box 4</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat sem quis augue varius porta.</p>
</div>