title: How to show hidden div onchange of dropdown
body: <p>I have a dropdown list where there are some inactive values.When I change a value in the dropdown I need find the id inside <code>divInactive</code> class and display the particular inactive item.User should given the message(present in <code>divInactive</code>) if he selects the inactive one.</p>
  
  <p>The span values inside the <code>divInactive</code> is generated using foreach loop from model.</p>
  
  <p>Spans are generated only for the inactive items.I am unable to show the inactive message.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;select&gt;
    &lt;option value="volvo"&gt;Volvo&lt;/option&gt;
    &lt;option value="saab"&gt;Saab&lt;/option&gt;
    &lt;option value="mercedes"&gt;Mercedes&lt;/option&gt;
    &lt;option value="audi"&gt;Audi&lt;/option&gt;
    &lt;option value="honda"&gt;Honda&lt;/option&gt;
    &lt;option value="ferrari"&gt;Ferrari&lt;/option&gt;
    &lt;option value="BMW"&gt;BMW&lt;/option&gt;
    &lt;option value="jaguar"&gt;Jaguar&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div class="divInactive"&gt;  
    &lt;span id="spninactive_Saab" style="display:none;"&gt;Saab is inactive&lt;/span&gt;
    &lt;span id="spninactive_Ferrari" style="display:none;"&gt;Ferrari is inactive&lt;/span&gt;
    &lt;span id="spninactive_Jaguar" style="display:none;"&gt;Jaguar is inactive&lt;/span&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(document).ready(function() {
    $("#drp").onchange {
      var ddlTxt = $("#drp").text();
      $(".divInactive").each(function() {
  
        cmpValue = $(this).find('#spninactive_' + ddlTxt).text();
  
        if (ddlTxt == cmpValue) {
          $(".divInactive #spninactive_" + ddlTxt).show();
        }
      });
    }
  
  });
  </code></pre>
  
  <p><kbd><a href="https://jsfiddle.net/iamraviteja/r71nsk2t/1/" rel="nofollow"><strong>Fiddle Demo</strong></a></kbd></p>