title: jQuery to auto create textbox when choosing 'other' from drop down?
body: <p>I have a drop down full of countries. When they select Canada or US, then a separate drop down gets auto populated with states/provinces. If they choose any other country, the 2nd drop down gets populated with "Other" with a blank value.</p>
  
  <p>My question is if they pick another country and th 2nd drop down get's populated with "Other", how can I auto display a textbox under the 2nd drop down, and dynamically tie it to the "Other" value. In other words, the value of the "Other"  dynamically gets populated with the textbox's value as they type. So when the form is submitted, the 2nd drop down's value gets posted with what they typed in the textbox.</p>
  
  <p>Can anyone help?</p>
  
  <p>Here is the jQuery plugin I am using to tie the country and state/province drop downs:
  <a href="https://github.com/adam12/jquery-state-select" rel="nofollow">https://github.com/adam12/jquery-state-select</a></p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;jQuery State Select Plugin Test&lt;/title&gt;
      &lt;script type="text/javascript" src="jquery-latest.pack.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="jquery.selectboxes.pack.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="jquery.stateselect.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
        $('#country').linkToStates('#province');
      });
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;form&gt;
        &lt;p&gt;
          &lt;label&gt;Province/State&lt;/label&gt;&lt;br /&gt;
          &lt;select name="province" id="province"&gt;
            &lt;option value=""&gt;Please select a country&lt;/option&gt;
          &lt;/select&gt;
        &lt;/p&gt;
        &lt;p&gt;
          &lt;label&gt;Country&lt;/label&gt;&lt;br /&gt;
          &lt;select name="country" id="country"&gt;
            &lt;option&gt;Please select&lt;/option&gt;
            &lt;option value="Canada"&gt;Canada&lt;/option&gt;
            &lt;option value="United States"&gt;United States&lt;/option&gt;
          &lt;/select&gt;
        &lt;/p&gt;
      &lt;/form&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p>Partial plugin code:</p>
  
  <pre><code> $.fn.extend({
          linkToStates: function(state_select_id) {
        $(this).change(function() {
          var country = $(this).attr('value');
          $(state_select_id).removeOption(/.*/);
          switch (country) {
            case 'Canada':
              $(state_select_id).addOption(canadian_provinces, false);
              break;
            case 'United States':
              $(state_select_id).addOption(us_states, false);
              break;
            default:
              $(state_select_id).addOption({ '' : 'Other'}, false);
              break;
          }
        });
      }
    });
  </code></pre>