我曾尝试创建一个程序，在该程序中，我需要使用jquery根据下拉列表中的值显示/隐藏div，但在我选择下拉列表中的值时，它没有显示任何div。

$(document).ready(function() {
  $('#VarType_Drop').on('change', function() {
    if (this.value == 'P') {
      $("#VarPercantage").show();
    } else if (this.value == 'D') {
      $("#VarDol").show();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebarFilterControl" id="vartypeselect">
  <span id="cplcSideBar_MacMonitorControl_VarSelect" class="sidebar-section" style="width: 90px;">Variance Type</span> &nbsp;&nbsp;
  <select name="ctl00$cplcSideBar$MacMonitorControl$VarType_Drop" id="cplcSideBar_MacMonitorControl_VarType_Drop">
    <option selected="selected" value="P">Percentage</option>
    <option value="D">Dollar</option>

  </select>
</div>

<div class="sidebarFilterControl" style="display:none;" id="VarPercantage">
  <span id="cplcSideBar_MacMonitorControl_VarPer" class="sidebar-section" style="width: 90px;">Variance: Percentage</span> &nbsp;&nbsp;
  <select name="ctl00$cplcSideBar$MacMonitorControl$VarPer_Drop" id="cplcSideBar_MacMonitorControl_VarPer_Drop">
    <option selected="selected" value="0">All</option>
    <option value="0">0-2</option>
    <option value="2">2-4</option>
    <option value="4">4-6</option>
    <option value="6">&gt;= 6</option>

  </select>
</div>
<div class="sidebarFilterControl" style="display:none;" id="VarDol">
  <span id="cplcSideBar_MacMonitorControl_VarDollar" class="sidebar-section" style="width: 90px;">Variance: Dollar (30 day supply)</span> &nbsp;&nbsp;
  <select name="ctl00$cplcSideBar$MacMonitorControl$VarDol_Drop" id="cplcSideBar_MacMonitorControl_VarDol_Drop">
    <option value="0">$0-2</option>
    <option value="2">$3-4</option>
    <option value="3">$5-6</option>
    <option value="4">&gt;$7</option>

  </select>
</div>