title: $(this).attr("id") not working
body: <p>as the title says, I keep getting "undefined" when I try to get the id attribute of an element, basically what I want to do is replace an element with an input box when the value is "other".</p>
  
  <p>Here is the code:</p>
  
  <pre><code>function showHideOther(obj) {
      var sel = obj.options[obj.selectedIndex].value;
      var ID = $(this).attr("id");
      alert(ID);
  
      if (sel == 'other') {
          $(this).html("&lt;input type='text' name='" + ID + "' id='" + ID + "' /&gt;");
  
      } else {
          $(this).css({
              'display': 'none'
          });
      }
  }
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>          &lt;span class='left'&gt;&lt;label for='race'&gt;Race: &lt;/label&gt;&lt;/span&gt;
            &lt;span class='right'&gt;&lt;select name='race' id='race' onchange='showHideOther(this);'&gt;
              &lt;option&gt;Select one&lt;/option&gt;
              &lt;option&gt;one&lt;/option&gt;
              &lt;option&gt;two&lt;/option&gt;
              &lt;option&gt;three&lt;/option&gt;
              &lt;option value="other"&gt;Other&lt;/option&gt;
            &lt;/select&gt;
            &lt;/span&gt;
  </code></pre>
  
  <p>It is probably something small that I am not noticing, what am I doing wrong?</p>