What am I doing wrong in this hide div using dropdown?

Question

I have tried to create a program where I need to show/hide div based on the dropdown values using jquery but it isn't showing any of the div when I select the value in dropdown.

$(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>

Why do I have to make you a snippet every time. Next time make your own from the start — mplungjan, Jul 12 '21 at 11:19

score 0 · Answer 1 · answered Jul 12 '21 at 11:22

Your ASP does not give the element the ID you expect - you can find out more here: Accessing Asp.net controls using jquery (all options)

Here is a quick fix and a more elegant method

$(document).ready(function() {
  $('[id$=VarType_Drop]').on('change', function() { // ends with ID
    $("#VarPercentage").toggle(this.value == 'P')
    $("#VarDol").toggle(this.value == 'D')
  }).change()
});

<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="VarPercentage">
  <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>

What am I doing wrong in this hide div using dropdown?

1 Answers1