Hiding a div with jQuery based on select box

Question

So I have 3 html divs/panels, one is my drop down menu that navigates through my pages, one is a table and the other I'm trying to load based on my fourth drop down select box. I have a few options in the fourth select box, and based off of what option is chosen, my third panel will appear and be the correct one. Then when you choose another option, the previous box hides, then the new correct one appears. I've been trying to accomplish this but have been quite unsuccessful, how would I go about doing this?

HTML: the menu-panel div id is my first div/panel. Second is the table which will be persistent, and the third is another page that I will be using on multiple other pages which Im trying to have pop up to the side of the table.

<!-- begin col-2 -->
    <div class="col-md-2">
        <div id="menu-panel"></div>
        <!-- begin panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <div class="panel-heading-btn">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                </div>
                <h4 class="panel-title">Digital Inputs</h4>
            </div>
            <div class="alert alert-info fade in">
                <button type="button" class="close" data-dismiss="alert">
                    <span aria-hidden="true">&times;</span>
                </button>
                Click on a Digital Input to edit its properties.
            </div>
            <div class="panel-body">
                <table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
                    <thead>
                        <tr>
                            <th>Input</th>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="gradeA">
                            <td id = "digital-input-number">1</td>
                            <td id = "digital-input-name">Digital Input 1</td>
                        </tr>
                        <tr class="gradeA">
                            <td id = "digital-input-number">2</td>
                            <td id = "digital-input-name">Digital Input 2</td>
                        </tr>
                        <tr class="gradeA">
                            <td id = "digital-input-number">3</td>
                            <td id = "digital-input-name">Digital Input 3</td>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- end panel -->
    </div>

My fourth dropdown box:

$("#vbottom").on("change", function(event){
                //alert("hi");

                var selection = $( "#vbottom option:selected" ).text();

                 console.log(selection);

                 switch (selection) {
                    case "Basic Settings":
                        menuPageLoad("#/ajax/settings/device_settings/digital_inputs/manage/basic_settings.html");
                        break;  
                    case "Normally Open or Closed Configuration":
                        menuPageLoad("#/ajax/settings/device_settings/digital_inputs/manage/normally_open_or_closed.html");
                        break; 
                    case "Value Labels and Alarming Statuses":
                        menuPageLoad("#/ajax/settings/device_settings/digital_inputs/manage/value_labels_and_alarming.html");
                        break; 
                    case "Timers and Counters":
                        menuPageLoad("#/ajax/settings/device_settings/digital_inputs/manage/timers_and_counters.html");
                        break; 
                    case "Preventative Maintenance Reminders":
                        menuPageLoad("#/ajax/settings/device_settings/digital_inputs/manage/preventative_maintenance_reminders.html");
                        break; 
                      case "xxx":
                          break;
                  }

             });

The third panel Im trying to have open to the side

Answer 1

You're looking for $(this).val();. If you apply that to the <select>, it will get the value of the selected <option>. You can then use that to hide all the <div>s, and then show the <div> with the same id as $(this).val();:

$('#selectbox').change(function() {
  var hidden = $(this).val();
  $(this).siblings('div.hideShowDivs').hide();
  $(this).siblings('div.hideShowDivs#div' + hidden).show();
});

#div1 {
  background-color: red;
}
#div2 {
  background-color: yellow;
}
#div3 {
  background-color: blue;
}
.hideShowDivs {
  border: 1px solid black;
  display: none;
  height: 50px;
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select id="selectbox">
  <option value="0" selected>None</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<div id="div1" class="hideShowDivs"></div>
<div id="div2" class="hideShowDivs"></div>
<div id="div3" class="hideShowDivs"></div>