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

Posted

技术标签:

【中文标题】根据选择值显示隐藏多个 div【英文标题】：Show hide multiple divs based on select value 【发布时间】：2018-05-20 10:20:51 【问题描述】：

寻找一些 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>

【问题讨论】：

【参考方案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>

【讨论】：

你能澄清 .ready 行的后半部分吗？为什么要输入 =>？ 这是一个Arrow Function Expression。 啊，我明白了。我认为这篇文章解释得更好：ilikekillnerds.com/2015/01/a-guide-to-es6-arrow-functions 只是一个警告，似乎箭头函数表达式在 IE11 和旧版本的 Safari 中不起作用【参考方案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>

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

【讨论】：

这可能看起来像一个干净的解决方案，但它从一开始就显示“其他问题”div。此 div 仅应在选择选项 1-3 时出现。 @okass 我已经更新了我的答案以包括这个:)。【参考方案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>

【讨论】：

【参考方案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>

【讨论】：

谢谢。看起来是一个很好的解决方案，尽管当用户返回选项 0（“请选择”）时，“其他问题”div 仍然显示。我该如何解释？

以上是关于根据选择值显示隐藏多个 div的主要内容，如果未能解决你的问题，请参考以下文章

如何根据数据库值显示设置访问权限和显示/隐藏 div

使用TextBox基于DropDownList选择值显示隐藏DIV

当我们选择“全部”选项时如何显示/隐藏 div

Javascript 隐藏/显示部分在重置时不起作用

div 的显示隐藏问题

一个div层中有多个显示和隐藏