Select Table Box

<style type="text/css">
.tableContainer td{text-align: center;}
.MMM--bgColor_20{font-weight:bold;}
.tableContainer table {display: none;}
.MMM--Select-Input{width:18%;}
.MMM-title{font-size:14px;font-weight: bold;}
.selectContainer{width:26%;}
.MMM--fancyDropDiv {margin-left: 50px;} 
td{border-right: 2px solid #fff;}
</style>
<form action="" class="centered MMM--gapTop">
<div class="selectContainer">
<div class="MMM--filterLabel MMM--LabelPrimary MMM--txt_italic">Title</div>
 <div class="MMM--fancyDropDiv js-fancyDropDiv">
 <select id="brand" class="MMM--selectInput subValCheck js-formoptions js-fancyDropDown MMM--isVisuallyHidden">
    <!--1. Update the option -->
    <option selected>Select options</option>
          <option value="Table1">Table1</option>
          <option value="Table2">Table2</option>
          <option value="Table3">Table3</option>
          <option value="Table4">Table4</option>
          <option value="Table5">Table5</option>
          <option value="Table6">Table6</option>
          <option value="Table7">Table7</option>
  </select>
</div>
</div>
</form>
<div class="tableContainer MMM--gapTop">
  <!--2. Update the corresponding table content -->
  <table frame="box" id="Table1" class="MMM--table MMM--Border" style="border-collapse:collapse;line-height:35px;margin:auto;width:100%;">
    <!--Table1 content  -->
    <tr><td>Table1</td></tr>
  </table>
  <table frame="box" id="Table2" class="MMM--table MMM--Border" style="border-collapse:collapse;line-height:35px;margin:auto;width:100%;">
    <!--Table2 content  -->
    <tr><td>Table2</td></tr>
  </table>
  <table frame="box" id="Table3" class="MMM--table MMM--Border" style="border-collapse:collapse;line-height:35px;margin:auto;width:100%;">
    <!--Table3 content  --> 
    <tr><td>Table3</td></tr>
  </table>
  <table frame="box" id="Table4" class="MMM--table MMM--Border" style="border-collapse:collapse;line-height:35px;margin:auto;width:100%;">
    <!--Table4 content  -->
    <tr><td>Table4</td></tr> 
  </table>
  <table frame="box" id="Table5" class="MMM--table MMM--Border" style="border-collapse:collapse;line-height:35px;margin:auto;width:100%;">
    <!--Table5 content  --> 
    <tr><td>Table5</td></tr>
  </table>
  <table frame="box" id="Table6" class="MMM--table MMM--Border" style="border-collapse:collapse;line-height:35px;margin:auto;width:100%;">
    <!--Table6 content  --> 
    <tr><td>Table6</td></tr>
  </table>
  <table frame="box" id="Table7" class="MMM--table MMM--Border" style="border-collapse:collapse;line-height:35px;margin:auto;width:100%;">
    <!--Table7 content  --> 
    <tr><td>Table7</td></tr>
  </table>
</div>
<script>
domReady.changeTable = function(){
  $("#brand").change(function(){
    var tableId = $("#brand").val();
    //alert (tableId);
    $(".tableContainer > table").hide();
    $("#"+tableId).show();
  })
}
</script>