How do I load different content on different dropdown selection?

Question

I have a dropdown menu with options like:

• " All "
• " 21 April 2019 "
• " 22 April 2019 "
• " 23 April 2019 "

I have 4 divs:

• " All Tabs "
• " 21 April Tab "
• " 22nd April Tab "
• " 23 April Tab "

So what I want to achieve is if I select " All " from dropdown, the " All Tabs " div should load only, and if I select " 21 April 2019 ", the " 21 April Tab " should load only, and likewise.

How can I achieve it?

Regards, Bill

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin=" anonymous"></script> <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <div class="card shadow-2 mb-3"> <div class="card-header"> <div class="col-9 pl-0 float-left"> <h4 class="card-heading mt-3 pt-2"> Price Breakdown </h4> </div> <div class="col-3 float-right"> <select class="form-control custom-select" id="conditionsselect1"> <option selected="selected" value="">All</option> <option>21 April 2019</option> <option>22 April 2019</option> <option>23 April 2019</option> </select> </div> </div> <div>All Tab</div> <div>21 April Tab</div> <div>22 April Tab</div> <div>23 April Tab</div> </div> 

Answer 1

are you trying something like this

    $(document).ready(function(){
  $("#conditionsselect1").change(function(){
    var val = $("#conditionsselect1").val();    
  //  $('.dyn-div:contains("'+val+'")').show();   

       $(".dyn-div").hide();
       $(".dyn-div."+val+"").show();
  });
});

 $(document).ready(function(){ $(".dyn-div").hide(); $(".dyn-div."+$("#conditionsselect1").val()+"").show(); $("#conditionsselect1").change(function(){ var val = $("#conditionsselect1").val(); // $('.dyn-div:contains("'+val+'")').show(); // if(val == "all") // { // $(".dyn-div").show(); // } // else // { $(".dyn-div").hide(); $(".dyn-div."+val+"").show(); // } }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin=" anonymous"></script> <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <div class="card shadow-2 mb-3"> <div class="card-header"> <div class="col-9 pl-0 float-left"> <h4 class="card-heading mt-3 pt-2"> Price Breakdown </h4> </div> <div class="col-3 float-right"> <select class="form-control custom-select" id="conditionsselect1"> <option selected="selected" value="all">All</option> <option value="one">21 April 2019</option> <option value="two">22 April 2019</option> <option value="three">23 April 2019</option> </select> </div> </div> <div class="dyn-div all">All Tab</div> <div class="dyn-div one">21 April Tab</div> <div class="dyn-div two">22 April Tab</div> <div class="dyn-div three">23 April Tab</div> </div> 

Answer 2

Please check this may be helpful.

  $(".jqSelector").change(function(){ $(".dataDivs").hide(); var optn = $(this).find(':selected').attr('data-show'); //alert(optn); $("." + optn).show(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin=" anonymous"></script> <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <div class="card shadow-2 mb-3"> <div class="card-header"> <div class="col-9 pl-0 float-left"> <h4 class="card-heading mt-3 pt-2"> Price Breakdown </h4> </div> <div class="col-3 float-right"> <select class="form-control custom-select jqSelector" id="conditionsselect1"> <option selected="selected" value="" data-show="all">All</option> <option data-show="first">21 April 2019</option> <option data-show="second">22 April 2019</option> <option data-show="third">23 April 2019</option> </select> </div> </div> <div class="dataDivs all">All Tab</div> <div class="dataDivs all first">21 April Tab</div> <div class="dataDivs all second">22 April Tab</div> <div class="dataDivs all third">23 April Tab</div> </div> 

Answer 3

I have made some changes in the HTML and i have added some jquery code. Just go through the code u will get some idea how to approach the problem.

<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin=" anonymous"></script>
<link rel="stylesheet" href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script>
 $('#conditionsselect1').on('change',function(){

    let selectVal= $(this).children("option").filter(":selected").attr('class');

    $('body table tbody').find('tr').hide();

    $('body table tbody').find('tr[class="'+selectVal+'"]').show();

})

</script>
</head>
<body>
<div class="card shadow-2 mb-3">
  <div class="card-header">
    <div class="col-9 pl-0 float-left">
      <h4 class="card-heading mt-3 pt-2">
        Price Breakdown
      </h4>
    </div>
    <div class="col-3 float-right">
      <select class="form-control custom-select" id="conditionsselect1">
        <option value="all" class="all">All</option>
        <option class="21">21 April 2019</option>
        <option class="22">22 April 2019</option>
        <option class="23">23 April 2019</option>
      </select>
    </div>
  </div>
  <table class="table table-user-information">
    <thead>
    <tr>
          <th></th>
          <th>Gross</th>
          <th>Net</th>
    </tr>
    </thead>
    <tbody>    
      <tr class="21">
        <td>Hello</td>
        <td>£30.00</td>
        <td>0.00</td>
      </tr>
      <tr class="22">
        <td>Hello 1</td>
        <td>£10.00</td>
        <td>0.00</td>
      </tr>
      <tr class="23">
        <td>Hello 2</td>
        <td>£7.00</td>
        <td>£7.00</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>