ブートストラップ4ドロップダウンメニューオプションを変更して、HTML内のdivを表示および非表示にする

Question

3つのオプションを持つdropdowm-menuバーがあります。オプションを変更すると、divの表示/非表示が必要になります。 jqueryのやり方を教えてください。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
<div class="row col-xl-12 justify-content-center align-items-center"> 
 
    <div class=" dropdown m-auto justify-content-center "> 
 
    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="about-us"> 
 
     <a class="dropdown-item" href="#" id="service">Options 1 </a> 
 
     <a class="dropdown-item" href="#" id="sales">Option 2</a> 
 
     <a class="dropdown-item" href="#" id="recall">Option 3</a> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div style ="display:none"> Selected Option1</div> 
 
<div style ="display:none"> Selected Option2</div> 
 
<div style ="display:none"> Selected Option3</div>

Answer 1

$(function(){ 
 
      \t \t \t \t $("#option1").click(function() { 
 
      \t \t \t \t \t alert("Service"); 
 
      \t \t \t \t \t $('#serviceCharts').show(); 
 
      \t \t \t \t \t $('#option-2').hide(); 
 
      \t \t \t \t \t $('#option-3').hide(); 
 
      \t \t \t \t \t $('#about-us').text($(this).text()); 
 
      \t \t \t \t \t 
 
      \t \t \t \t }); 
 
      \t \t \t \t 
 
      \t \t \t \t $("#option2").click(function() { 
 
      \t \t \t \t \t alert("Sales"); 
 
      \t \t \t \t \t $('#option-1').hide(); 
 
      \t \t \t \t \t $('#option-2').show(); 
 
      \t \t \t \t \t $('#option-3').hide(); 
 
      \t \t \t \t \t $('#about-us').text($(this).text()); 
 
      \t \t \t \t \t 
 
      \t \t \t \t }); 
 
      \t \t \t \t 
 
      \t \t \t \t $("#option3").click(function() { 
 
      \t \t \t \t \t alert("Recall"); 
 
      \t \t \t \t \t $('#option-1').hide(); 
 
      \t \t \t \t \t $('#option-2').hide(); 
 
      \t \t \t \t \t $('#option-3').show(); 
 
      \t \t \t \t \t $('#about-us').text($(this).text()); 
 
      \t \t \t \t \t 
 
      \t \t \t \t }); 
 
      \t \t \t \t 
 
      \t \t \t }); 
 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row col-xl-12 justify-content-center align-items-center" style="padding: 0 0 100px;"> 
 
         <div class=" dropdown m-auto justify-content-center snapshotdropmenu"> 
 
          <span class="selectprogram">Select Program:</span> 
 
          <button class="btn btn-salesbtn dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
          </button> 
 
         <div class="dropdown-menu dropdown-menu-right" aria-labelledby="about-us"> 
 
          <a class="dropdown-item" id="option1">option1</a> 
 
          <a class="dropdown-item" id="option2">option2</a> 
 
          <a class="dropdown-item" id="option3">option3</a> 
 
         </div> 
 
         </div> 
 
        </div> 
 
      
 
      <div id="option-1" class="group">Red</div> 
 
      <div id="option-2" class="group" style="display:none">Blue</div> 
 
      <div id="option-3" class="group" style="display:none">Green</div>

Answer 2

$(document).ready(function() { 
 
    $('.group').hide(); 
 
    $('#option1').show(); 
 
    $('#outer').change(function() { 
 
    $('.group').hide(); 
 
    $('#'+$(this).val()).show(); 
 
    }) 
 
});

#option1{ 
 
    background-color:red; 
 
    height:400px; 
 
    color:white; 
 
} 
 

 
#option2{ 
 
    background-color:blue; 
 
    height:400px; 
 
    color:white; 
 
} 
 

 
#option3{ 
 
    background-color:green; 
 
    height:400px; 
 
    color:white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select id="outer"> 
 
    <option value="option1">option1</option> 
 
    <option value="option2">option2</option> 
 
    <option value="option3">option3</option> 
 
</select> 
 

 
<div id="option1" class="group">Red</div> 
 
<div id="option2" class="group">Blue</div> 
 
<div id="option3" class="group">Green</div>