title: How to check if a certain select option is checked in jQuery
body: <p>I looked around here and found nothing so I'll ask it here. How do I check if a certain option is selected in a <code>&lt;select&gt;</code> box?</p>
  
  <p>Here's what I have so far and doesn't work:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
      &lt;meta http-equiv="imagetoolbar" content="no" /&gt;
      &lt;title&gt;FancyBox 1.3.4 | Demonstration&lt;/title&gt;
      &lt;script type="text/javascript" src="jquery-1.5.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="scripts/fancybox/jquery.mousewheel-3.0.4.pack.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="scripts/fancybox/jquery.fancybox-1.3.4.pack.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="scripts/fancybox/jquery.fancybox-1.3.4.css" media="screen" /&gt;
  
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
  
              $("#various1").fancybox({
          'transitionIn'   :  'fade',
          'transitionOut'  :  'fade',
          'speedIn'        :  300, 
          'height': '300',
          'width': '300',
          'speedOut'       :  300, 
                  'opacity'       : true,
                  'centerOnScroll': true,
                  'autoDimensions': false
              });
  
          });
      &lt;/script&gt;
  
      &lt;style&gt;
      * {
  margin: 0;
  padding: 0;
  }
      .header {
  background:#789FCC;
  color:#fff;
  font:16px verdana;
  font-weight:700;
  padding:5px;
  margin-bottom:10px;
  }
      h3 {
          font-weight: bold;
          font-size: 17px;
          display: block;
           padding:5px;     
      }
      #inline1 {
          padding:0;
          margin:0;  
          font:12px verdana;  
      }    
    #note {
      display:none;
    }
      &lt;/style&gt;
      &lt;script type="text/javascript"&gt; 
  $(document).ready(function() {
  
   if ($("#test_now option[value='3']:selected")) {
      alert('Testing');
      $("#note").toggle();
    }
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;a id="various1" href="#inline1"&gt;Report Answer&lt;/a&gt;
  
  
  &lt;div style="margin:0;padding:0;display:none;"&gt;
  &lt;div id="inline1" style="padding:0;marging-top:10px;"&gt;
  
  &lt;div class="header"&gt;&lt;h3&gt;Testing&lt;/h3&gt;&lt;/div&gt;
  
  Submit this form:
  
  &lt;form method="post" action="x.html"&gt;
  &lt;select id="test_now" name="why"&gt;
  &lt;option value="1"&gt;One&lt;/option&gt;
  &lt;option value="2"&gt;Two&lt;/option&gt;
  &lt;option value="3"&gt;Three&lt;/option&gt;
  &lt;option value="4"&gt;Four&lt;/option&gt;
  &lt;option value="5"&gt;Five&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;br /&gt;
  
  &lt;div id="note"&gt;&lt;textarea rows="5" cols="20"&gt;&lt;/textarea&gt;&lt;/div&gt; 
  &lt;/form&gt;
  
  &lt;/div&gt;  
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>