Question

我正在制作一份互动式简历，我想要一个包含技能列表的下拉菜单。选择技能时，仅显示相关的div块。当选择＆＃34; all＆＃34;，默认选项时，所有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

<强> Working fiddle

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

$('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 个答案: