更改bootstrap 4 dropdown-menu選項以顯示和隱藏html中的div

Question

我有3個選項的dropdowm菜單欄。 當我更改選項時，我需要隱藏/顯示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>