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

【问题标题】：Drop down menu that only shows divs depending on selection仅根据选择显示 div 的下拉菜单
【发布时间】：2016-12-07 18:34:12
【问题描述】：

我正在制作一份交互式简历，我想要一个包含技能列表的下拉菜单。选择技能时，仅显示相关的 div 块。当“全部”（默认选项）选中所有DIVS显示时。

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

【问题讨论】：

在发帖之前，您应该做一些基础研究。
别担心 @ChrisG 有人帮助了我。感谢您的“贡献”。仅供参考，我确实搜索了所有其他相关问题和谷歌，试图自己先弄清楚。
我一点也不担心，我只是告诉你你的问题不属于这里：stackoverflow.com/search?q=on+selection+show+hide
Show/hide (toggle) the display of divs based on selection using javascript的可能重复
@ChrisG 哭脸表情

标签： javascript jquery html css

【解决方案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>

【讨论】：

【解决方案2】：

Working fiddle.

是的，您可以使用 on change 事件，例如：

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

【讨论】：

谢谢，我试试看！
是的，请检查我的更新日期。