CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Learning to Code
Learning to Code

Reputation: 37

Drop down menu that only shows divs depending on selection

I am making an interactive resume and I want to have a drop down that contains a list of skills. When a skill is selected only the div block that pertains is shown. When "all", the default option, is selected all divs show.

How would I go about this with jquery? 

<select>
 <option value="all">All</option>   
 <option value="salesforce">Salesforce</option>
 <option value="supplychain">Supply Chain Management</option>
 <option value="research">Market Research</option>
 <option value="marketing">Marketing</option>
</select>

I have a div block for each option value above similar to below:

<div class="experience-block supplychain all">
<p>supply chain management stuff</p>
</div>

<div class="experience-block marketing all">
<p>marketing stuff</p>
</div>

<div class="experience-block salesforce all">
<p>salesforce stuff</p>
</div>

<div class="experience-block research all">
<p>market research stuff</p>
</div>

Upvotes: 0

Views: 83

Answers (2)

Ankit Pandey
Ankit Pandey

Reputation: 650

I would like to solve your problem using core JavaScript.

    // a solution for your problem   
function setOptions(){
  var option = document.querySelector('#setOpt');
  var div = document.querySelectorAll('.experience-block');
  var selectedOpt = option.value;
  
  // show hide of div according to class
  divShowHide(div, selectedOpt);
}

function divShowHide(div, selectedOpt){
    for(var i=0; i<div.length; i++){
        if(selectedOpt == 'all'){
            div[i].style.display = 'block';
        }else{
            var isClassFound = div[i].className.indexOf(selectedOpt);
            if(isClassFound > -1){
            div[i].style.display = 'block';
            }else{
            div[i].style.display = 'none';
            }
        }    
    }  
}    
 <!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <select id="setOpt" onchange="setOptions()">
       <option value="all">All</option>   
       <option value="salesforce">Salesforce</option>
       <option value="supplychain">Supply Chain Management</option>
       <option value="research">Market Research</option>
       <option value="marketing">Marketing</option>
    </select>
    
    
    <div class="experience-block supplychain all">
    <p>supply chain management stuff</p>
    </div>
    
    <div class="experience-block marketing all">
    <p>marketing stuff</p>
    </div>
    
    <div class="experience-block salesforce all">
    <p>salesforce stuff</p>
    </div>
    
    <div class="experience-block research all">
    <p>market research stuff</p>
    </div>
  </body>

</html>

Upvotes: 2

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Working fiddle.

Yes you could using on change event like :

$('select').on('change', function(){
   var selected = $(this).val();

   if(selected=='all'){
      $('.experience-block').show();
      $('.experience').show();
    }else{
      $('.experience-block').hide();
      $('.experience-block.'+selected).show();
      $('.experience').hide();
    }
})

Hope this helps.

$('select').on('change', function(){
  var selected = $(this).val();

  if(selected=='all')
    $('.experience-block').show();
  else{
    $('.experience-block').hide();
    $('.experience-block.'+selected).show();
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="all">All</option>   
  <option value="salesforce">Salesforce</option>
  <option value="supplychain">Supply Chain Management</option>
  <option value="research">Market Research</option>
  <option value="marketing">Marketing</option>
</select>

<div class="experience-block supplychain all">
  <p>supply chain management stuff</p>
</div>

<div class="experience-block marketing all">
  <p>marketing stuff</p>
</div>

<div class="experience-block salesforce all">
  <p>salesforce stuff</p>
</div>

<div class="experience-block research all">
  <p>market research stuff</p>
</div>

Upvotes: 1

Related Questions