show div after select in drop-down select-CodePudding

how to show div after selecting it in select in drop-down?

below is my code

  $(document).ready(function(){
    $('#selectoption').on('change', function() {
      if ( this.value == '0'){
        $("#option0").show();
      }
      else  if ( this.value == '1')
      {
        $("#option1").show();
      }
       else
      {
        $("#option2").show();
      }
    });
});

#option0,
#option1,
#option2 {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-12">
    <select id="selectoption">
        <option value="0">Option 1</option>
        <option value="1">Option 2</option>
        <option value="2">Option 3</option>
    </select>
</div>

<div class="row">
    <div class="col-4">
        <div id="option0">
            <p class="content">Lorem ipsum... Example...</p>
        </div>
    </div>

    <div class="col-4">
        <div id="option1">
            <p class="content">Lorem ipsum... Example...</p>
        </div>
    </div>

    <div class="col-4">
        <div id="option2">
            <p class="content">Lorem ipsum... Example...</p>
        </div>
    </div>
</div>

the code works, but I want the div to be hidden if another one was selected the code to be scalable - i.e. without 10 else when there are 10 divs

CodePudding user response：

First of all hide your div using wild card and show div based upon dropdown value.

$(document).ready(function() {
  $('#selectoption').on('change', function() {
    $("[id^='option']").hide();
    var val = $(this).val();
    $("#option"   val).show();

  });
});

#option0,
#option1,
#option2 {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-12">
  <select id="selectoption">
    <option value="0">Option 1</option>
    <option value="1">Option 2</option>
    <option value="2">Option 3</option>
  </select>
</div>

<div class="row">
  <div class="col-4">
    <div id="option0">
      <p class="content">Lorem ipsum... Example...</p>
    </div>
  </div>

  <div class="col-4">
    <div id="option1">
      <p class="content">Lorem ipsum... Example...</p>
    </div>
  </div>

  <div class="col-4">
    <div id="option2">
      <p class="content">Lorem ipsum... Example...</p>
    </div>
  </div>
</div>

CodePudding user response：

The code is not optimal, but all you have to do is hide everything before showing a new one.

$(document).ready(function(){
        $("#option0").show();
    $('#selectoption').on('change', function() {
    $("#option0").hide();
    $("#option1").hide();
    $("#option2").hide();

      if ( this.value == '0'){
        $("#option0").show();
      }
      else  if ( this.value == '1')
      {
        $("#option1").show();
      }
       else
      {
        $("#option2").show();
      }
    });
});

#option0,
#option1,
#option2 {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-12">
    <select id="selectoption">
        <option value="0">Option 1</option>
        <option value="1">Option 2</option>
        <option value="2">Option 3</option>
    </select>
</div>

<div class="row">
    <div class="col-4">
        <div id="option0">
            <p class="content">Lorem ipsum... Example...</p>
        </div>
    </div>

    <div class="col-4">
        <div id="option1">
            <p class="content">Lorem ipsum... Example...</p>
        </div>
    </div>

    <div class="col-4">
        <div id="option2">
            <p class="content">Lorem ipsum... Example...</p>
        </div>
    </div>
</div>

CodePudding user response：

You can add common class to all the div, so that on each click you can hide it by classname. Then get value of selected item, and based on values select item and show it.

$('#selectoption').on('change', function() {

    var getValue = $(this).val();

    $(".common").hide();
    $("#option"   getValue).show();

});

Html Markup:

<div class="row">
    <div class="col-4">
        <div  class="common" id="option0">
            <p class="content">Lorem ipsum... Example...</p>
        </div>
    </div>

    <div class="col-4">
        <div class="common" id="option1">
            <p class="content">Lorem ipsum... Example...</p>
        </div>
    </div>

    <div class="col-4">
        <div class="common"  id="option2">
            <p class="content">Lorem ipsum... Example...</p>
        </div>
    </div>
</div>