選択に応じてdivのみを表示するドロップダウンメニュー

-1

私はインタラクティブなレジュメを作成しており、スキルのリストを含むドロップダウンをしたいと思います。スキルが選択されると、関連するdivブロックのみが表示されます。 "all"（デフォルトオプション）が選択されると、すべてのdivが表示されます。選択に応じてdivのみを表示するドロップダウンメニュー

jqueryを使ってどうすればいいですか？

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

出典

2016-12-07 Learning to Code

あなたはここに投稿する前に、いくつかの基本的な研究を行うことが期待されています。 –

@ChrisG誰かが私を助けてくれることを心配しないでください。しかし、あなたの "貢献"に感謝します。参考までに、他のすべての関連する質問とGoogleを検索して、まずそれを自分自身で把握してみました。 –

私は心配していません、私はあなたの質問がここに属していないことを伝えるだけです：http://stackoverflow.com/search?q=on+selection+show+hide –

Working fiddle：

<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ブロックを持っています。

はい、あなたは以下のように変更イベントに使用できます。

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

出典

2016-12-07 18:38:54

ありがとう、私はそれを試してみましょう！ –

はい、私のudpdateを確認してください。 –

私はコア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>

出典

2016-12-07 20:15:46

選択に応じてdivのみを表示するドロップダウンメニュー

答えて

関連する問題