title: Drop down selection changes
body: <p>I have a drop down that is supposed to change features on my page but obviously isnt working.  I have a map on on the drop down selection once the user selects and industry it updates the map and is supposed to update the legend below.  The legend is not updating</p>
  
  <p>Please point out what I am doing wrong.  </p>
  
  <p>Thank you</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>    $("#lstMap1Occ").change(function () {
          var index = $(this).children(":selected").index();
          $("#legend").children().hide().eq(index).show();
      });
  </code></pre>
  
  <p>here is the drop down (yes there is an  ending select tag is ist just not pasting in for some odd reason)</p>
  
  <pre><code>&lt;select id="lstMap1Occ"&gt;
      &lt;option value="1"&gt;Engineers &lt;/option&gt;
      &lt;option value="2"&gt;Chemical Engineers&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="legend"&gt;
  &lt;div class="engineers"&gt;
      &lt;ul&gt;
          &lt;li style="background-color:rgb(254,240,217);"&gt;0-345&lt;/li&gt;
          &lt;li style="background-color:rgb(253,212,158);"&gt;346-503&lt;/li&gt;
          &lt;li style="background-color:rgb(253,187,132);"&gt;504-1240&lt;/li&gt;
          &lt;li style="background-color:rgb(252,141,89);"&gt;1241-1679&lt;/li&gt;
          &lt;li style="background-color:rgb(239,101,72);"&gt;1680-2625&lt;/li&gt;
          &lt;li style="background-color:rgb(215,48,31);"&gt;2627-4789&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="chemical"&gt; 
      &lt;ul&gt;
          &lt;li style="background-color:rgb(254,240,217);"&gt;0-13&lt;/li&gt;
          &lt;li style="background-color:rgb(253,212,158);"&gt;14-24&lt;/li&gt;
          &lt;li style="background-color:rgb(253,187,132);"&gt;25-37&lt;/li&gt;
          &lt;li style="background-color:rgb(252,141,89);"&gt;38-56&lt;/li&gt;
          &lt;li style="background-color:rgb(239,101,72);"&gt;57-112&lt;/li&gt;
          &lt;li style="background-color:rgb(215,48,31);"&gt;113-168&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>