Javascript 如何使用jquery以下拉选择器为目标

在从下拉选择器中选择选项时，我试图显示和隐藏div

第1季第1集应在加载时显示，第2季第2集应隐藏

通过下拉菜单选择Div 2 season 2时，Div 1 season 1应隐藏，Div 2 season 1应显示，反之亦然

这是我的HTML-

 <h4>Season:</h4> 
    <select>
      <option value="s1">Winter 2017</option>
      <option value="s2">Summer 2017</option>
  </select>
<div id="season1">
    <table class="table table-hover table-striped">
        <thead>
  <tr>
    <th>Name</th>
    <th>GP</th> 
    <th>G</th>
    <th>A</th>
    <th>Pnts</th>
    <th>PiM</th>
  </tr>
</thead>
  <tr>
    <td>Adam</td>
    <td>12</td> 
    <td>2</td>
    <td>0</td>
    <td>2</td>
    <td>2</td>
  </tr>
</table>
</div>
<div id="season2">
    <table class="table table-hover table-striped">
        <thead>
  <tr>
    <th>Name</th>
    <th>GP</th> 
    <th>G</th>
    <th>A</th>
    <th>Pnts</th>
    <th>PiM</th>
  </tr>
</thead>
  <tr>
    <td>Brad</td>
    <td>15</td> 
    <td>5</td>
    <td>3</td>
    <td>6</td>
    <td>9</td>
  </tr>
</table>
</div>

我已将s1和s2更改为第1季和第2季，因此它们与div的id匹配

然后您可以使用：

$("select").on("change", function() {
  $('[id^=season]').hide();  // This will hide all element that has an id starting with season
  $('#' + $(this).val()).show();  // example '#season1'
})

演示

$document.readyfunction{ $‘第一季’节目； $‘季节2’。隐藏； $select.onchange，函数{ $'[id^=season]'。隐藏； $+$this.val.show； } }; 季节： 2017年冬季 2017年夏季 名称 全科医生 G A. Pnts PiM 亚当 12 2. 0 2. 2. 名称 全科医生 G A. Pnts PiM 布拉德 15 5. 3. 6. 9

---

这非常有效，非常感谢Carsten，我很感激@KyleSchmelzer没问题，很乐意帮忙

$("select").on("change", function() {
  $('[id^=season]').hide();  // This will hide all element that has an id starting with season
  $('#' + $(this).val()).show();  // example '#season1'
})