下拉菜单仅根据选择显示div

Question

我正在制作一个交互式简历，我希望下拉列表中包含技能列表。 选择一项技能时，仅显示相应的div块。 选中默认选项“全部”时，所有div都会显示。

我将如何使用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>

对于上面的每个选项值，我都有一个div块，如下所示：

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

Answer 1

我想使用核心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>

Answer 2

工作提琴 。

是的，您可以使用诸如以下更改事件：

$('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();
    }
})

希望这可以帮助。

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

下拉菜单仅根据选择显示div

问题描述

2 个解决方案

解决方案1
2 2016-12-07 20:15:46

解决方案2
1 已采纳 2016-12-07 18:38:54

下拉菜单仅根据选择显示div

问题描述

2 个解决方案

解决方案1 2 2016-12-07 20:15:46

解决方案2 1 已采纳 2016-12-07 18:38:54

解决方案1
2 2016-12-07 20:15:46

解决方案2
1 已采纳 2016-12-07 18:38:54