根据选择值显示隐藏多个 div

Question

寻找一些 jQuery 来帮助以我正在创建的简单表单隐藏和显示内容。

在选择字段中选择选项 1-3 应显示三个数据响应 div 之一，并显示表单其余部分中的内容（data-form-order 2）。

我认为数据属性是一个很好的下降路径，但有点不确定从哪里开始。

<form>
  <div data-form-order="1">

    <div id="opening-question">
      <select id="select-box">
      <option value="0">- please select -</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    </div>

    <div data-response="op1">
      This is content for option 1.
    </div>
    <div data-response="op2">
      This is content for option 2.
    </div>
    <div data-response="op3">
      This is content for option 3.
    </div>
  </div>

  <div data-form-order="2" id="other-questions">
    Rest of form content. This area should show when option values 1-3 are selected in the select field.
  </div>
</form>

Answer 1

我强烈推荐阅读Decoupling Your HTML, CSS, and JavaScript。您可以制作一些非常简单且可重用的 jQuery，这些 jQuery 可以做一些非常酷的事情，而无需大量重复代码或紧密耦合的代码。以下是非常可扩展、可重用、易于阅读和维护的。

$(document).ready(()=>{
  $('.js-revealer').on('change', function(){
    var $select = $(this);
    var $selected = $select.find('option:selected');
    var hideSelector = $selected.data('r-hide-target');
    var showSelector = $selected.data('r-show-target');
    
    $(hideSelector).addClass('is-hidden');
    $(showSelector).removeClass('is-hidden');
  });
});

.is-hidden{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div data-form-order="1">

    <div id="opening-question">
      <select id="select-box" class="js-revealer">
      <option value="0" data-r-show-target="" data-r-hide-target=".opt-1, .opt-2, .opt-3, .opt-other">- please select -</option>
      <option value="1" data-r-show-target=".opt-1, .opt-other" data-r-hide-target=".opt-2, .opt-3">Option 1</option>
      <option value="2" data-r-show-target=".opt-2, .opt-other" data-r-hide-target=".opt-1, .opt-3">Option 2</option>
      <option value="3" data-r-show-target=".opt-3, .opt-other" data-r-hide-target=".opt-1, .opt-2">Option 3</option>
    </select>
    </div>

    <div data-response="op1" class="opt-1 is-hidden">
      This is content for option 1.
    </div>
    <div data-response="op2" class="opt-2 is-hidden">
      This is content for option 2.
    </div>
    <div data-response="op3" class="opt-3 is-hidden">
      This is content for option 3.
    </div>
  </div>

  <div data-form-order="2" id="other-questions" class="opt-other is-hidden">
    Rest of form content. This area should show when option values 1-3 are selected in the select field.
  </div>
</form>

Answer 2

你真正需要的是默认使用一些 CSS 隐藏所有 div，然后使用 change 函数获取值并根据该值选择 div：

$('#select-box').change(function(){

   var selectVal = $(this).val();
   $('.content, #other-questions').hide();
   $('.content[data-response="op' + selectVal + '"], #other-questions').show();

});

.content, #other-questions {
display: none;
}

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

<form>
  <div data-form-order="1">

    <div id="opening-question">
      <select id="select-box">
      <option value="0">- please select -</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    </div>

    <div class="content" data-response="op1">
      This is content for option 1.
    </div>
    <div class="content" data-response="op2">
      This is content for option 2.
    </div>
    <div class="content" data-response="op3">
      This is content for option 3.
    </div>
  </div>

  <div data-form-order="2" id="other-questions">
    Rest of form content. This area should show when option values 1-3 are selected in the select field.
  </div>
</form>

我已更新我的答案以包含比数据属性更适合选择元素的类。

Answer 3

我建议为此使用类，不需要数据属性。

$(function() {
    $('#select-box').change(function(){
        if($('#select-box').val() == '1') {
            $('.response1').show();
            $('.response2').hide();
            $('.response3').hide();
            $('#content').show();
        } 
        else if($('#select-box').val() == '2') {
            $('.response1').hide();
            $('.response2').show();
            $('.response3').hide();
            $('#content').show();
        }
        else if($('#select-box').val() == '3') {
            $('.response1').hide();
            $('.response2').hide();
            $('.response3').show();
            $('#content').show();
        } 
    });
});

.response1, .response2, .response3 {
  display: none;
}

#content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div data-form-order="1">

    <div id="opening-question">
      <select id="select-box">
      <option value="0">- please select -</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    </div>

    <div class='response1' data-response="op1">
      This is content for option 1.
    </div>
    <div class='response2' data-response="op2">
      This is content for option 2.
    </div>
    <div class='response3' data-response="op3">
      This is content for option 3.
    </div>
  </div>

  <div id='content' data-form-order="2" id="other-questions">
    Rest of form content. This area should show when option values 1-3 are selected in the select field.
  </div>
</form>

Answer 4

我使用 Class 显示了显示/隐藏。最初隐藏所有 div，显示在下拉选择中（仅匹配 div）。这是如何。我创建了两个类hide 隐藏元素，show 显示元素。

$('[data-response^=op]').attr('class',"hide");//Initially set all div hidden
$("#select-box").on("change",function(){
  var value = $(this).val();
  if(value !="" && value<=3 && value !=0){
    console.clear();// to clear older logs.
    console.log('Selected value'+$(this).val());
    $('[data-response^=op]').attr('class',"hide");//On change hide all div's
    var selector = "op"+value;
    $(document).find("[data-response='"+selector+"']").attr('class',"show");
    $("#other-questions").attr('class',"show");//Show matching div.
  }else{
   $("#other-questions").attr('class',"hide");
   $('[data-response^=op]').attr('class',"hide");
  }

})

.hide{
display:none;
}

.show{
display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div data-form-order="1">

    <div id="opening-question">
      <select id="select-box">
      <option value="0">- please select -</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    </div>

    <div data-response="op1">
      This is content for option 1.
    </div>
    <div data-response="op2">
      This is content for option 2.
    </div>
    <div data-response="op3">
      This is content for option 3.
    </div>
  </div>

  <div data-form-order="2" id="other-questions" class="hide">
    Rest of form content. This area should show when option values 1-3 are selected in the select field.
  </div>
</form>