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

时间：2017-12-06 13:50:16

标签： javascript jquery forms select

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

选择字段中的选择选项1-3应显示三个数据响应div中的一个，并在表单的其余部分显示内容（数据形式顺序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>

4 个答案:

答案 0 :(得分：1)

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

＆＃13;
＆＃13; 
$('#select-box').change(function(){

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

});
＆＃13; 
.content, #other-questions {
display: none;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我已经更新了我的答案，包括更适合选择元素而不是数据属性的类。

答案 1 :(得分：1)

我强烈建议您阅读Decoupling Your HTML, CSS, and JavaScript。你可以制作一些非常简单和可重用的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>

答案 2 :(得分：0)

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

$(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>

答案 3 :(得分：0)

我使用Class显示了show / hide。最初隐藏所有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>

相关问题
最新问题