更改 bootstrap 4 下拉菜单选项以在 html 中显示和隐藏 div

Question

我有一个带有 3 个选项的下拉菜单栏。当我更改选项时，我需要隐藏/显示 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

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

Answer 2

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

   

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