title: Call a function when a particular select option is chosen
body: <p>I have two select menus requesting </p>
  
  <ol>
  <li>a resident's building number and </li>
  <li>their apartment number</li>
  </ol>
  
  <p>If the visitor chooses the last item of either menu (both have the same <code>value,</code> <code>text</code> and <code>class</code>), I want to call a function that hides the form from them and displays a message. </p>
  
  <p>The function is working fine as it's also invoked via a standalone link that a non-resident would potentially click: <em>(Don't live here?)</em></p>
  
  <p>What I can't make work is having the <code>select</code>'s <code>change()</code> event call the function if and when that last option is selected. </p>
  
  <p>Here's a brief version of my select code:</p>
  
  <pre><code>&lt;form id="document-request" name="document-request" class="clearfix"&gt;
      &lt;label&gt;Your Full Name:
          &lt;input type="text" name="fullname" value="" class="span12"
          required&gt;
      &lt;/label&gt;
      &lt;label&gt;Your Email:
          &lt;input type="text" name="email" value="" class="span12 email"
          required&gt;
      &lt;/label&gt;
      &lt;label for="building"&gt;Your Bldg &amp;amp; Apt#:&lt;/label&gt;
      &lt;select name="building" class="span2" required&gt;
          &lt;optgroup label="Building"&gt;
              &lt;option value="" name="building"&gt;--&lt;/option&gt;
              &lt;option value="1" name="building"&gt;1&lt;/option&gt;
              &lt;option value="2" name="building"&gt;2&lt;/option&gt;
              &lt;option value="3" name="building"&gt;3&lt;/option&gt;
              &lt;option value="4" name="building"&gt;4&lt;/option&gt;
              &lt;option value="5" name="building"&gt;5&lt;/option&gt;
              &lt;option value="6" name="building"&gt;6&lt;/option&gt;
              &lt;option value="7" name="building"&gt;7&lt;/option&gt;
          &lt;/optgroup&gt;
          &lt;option value="nonresident" name="building" class="dontlivehere"&gt;I Don’t Live Here&lt;/option&gt;
      &lt;/select&gt;
  </code></pre>
  
  <p>and here's the jQuery:</p>
  
  <pre><code>$('#document-request select').change(function () {
      var theValue = $(this).child('option:selected').text();
      if ((theValue).contains('Live Here')) {
          residenceAlert();
      }
  });
  </code></pre>
  
  <p>I have also tried to accomplish this by acting on the <code>value</code> as well as the <code>class</code>.<br>
  I don't really need that <code>dontlivehere</code> class, it's just part of me trying to find a solution.</p>
  
  <p>The sample page-in-progress can be found <a href="http://northqueensviewhomes.com/policies.html" rel="nofollow"><strong>here</strong></a></p>