title: Making a jQuery event trigger with both keyboard and mouse inputs inside a select element
body: <p>OK here goes,</p>
  
  <p>I am trying to write a script that, when a user keys or clicks onto an <code>&lt;option id='blselect'&gt;</code> within a <code>&lt;select&gt;</code> element an event is triggered that shows a hidden element. If any of the other <code>&lt;option class='unselect'&gt;</code> are clicked then the aforementioned element will be hidden.</p>
  
  <p>I have gotten the script to work perfectly in regards to user clicks but the problem is if the user was to user the keyboard to work through the form.</p>
  
  <p>The event wanting to be triggered for the <code>&lt;option id='blselect'&gt;</code> to show is as such;</p>
  
  <pre><code>$("#blselect").click(function() {
      $("#hidden").animate({
          opacity: 'show',
          width: "100%"
      }, 1500);
  });
  </code></pre>
  
  <p>The event wanting to be triggered for the  to hide is as such;</p>
  
  <pre><code>$(".unselect").click(function() {
      $("#hidden").animate({
          opacity: 'hide'
      }, 1500);
  });
  </code></pre>
  
  <p>That shows a CSS hidden element and of course animates the visual.</p>
  
  <p>So in short, a solution that covers both keyboard and mouse inputs when a user either focuses onto the <code>&lt;option id='blselect'&gt;</code> or the <code>&lt;option class='unselect'&gt;</code> elements.</p>
  
  <pre><code>&lt;li&gt;
      &lt;select&gt;
          &lt;option class="unselect" selected&gt;Please choose an option..&lt;/option&gt;
          &lt;option id="blselect"&gt;John&lt;/option&gt;
          &lt;option class="unselect"&gt;Mike&lt;/option&gt;
          &lt;option class="unselect"&gt;Barry&lt;/option&gt;
          &lt;option class="unselect"&gt;Sally&lt;/option&gt;
          &lt;option class="unselect"&gt;Gertrude&lt;/option&gt;
          &lt;option class="unselect"&gt;Jill&lt;/option&gt;
      &lt;/select&gt;
  &lt;/li&gt;
  
  &lt;li id="hidden"&gt;
      &lt;input type="text"&gt;
  &lt;/li&gt;
  
  $("#blselect").click(function() {
      $("#hidden").animate({
          opacity: 'show',
          width: "100%"
      }, 1500);
  });
  
  $(".unselect").click(function() {
      $("#hidden").animate({
          opacity: 'hide'
      }, 1500);
  });
  </code></pre>
  
  <p>Hope this is enough information to get people started? please let me know if you need more.</p>
  
  <p>Thanks in advance.</p>