title: How to change a drop-down list into a text-box on a selection in jQuery?
body: <p>I have a drop-down list, and I want it to change to an empty text-box when I select the <code>Other</code> option.</p>
  
  <p><img src="https://i.stack.imgur.com/2Vaas.png" alt="Enter image description here"></p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;select id='visit'&gt;
      &lt;option value='1' class='volunteer'&gt;Romania&lt;/option&gt;
      &lt;option value='2' class='volunteer1'&gt;Slovakia&lt;/option&gt;
      &lt;option value='3' class='volunteer2'&gt;Belgium&lt;/option&gt;
      &lt;option value='4' class='volunteer3'&gt;Other&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>And this is the minimal JavaScript code to start with:</p>
  
  <pre><code>$('#visit').live('change', function () {
      if ((this.value) == 4) {
          alert("Other selected")
          //Code to change select list into textbox here
      }
  });
  </code></pre>
  
  <p>The <a href="http://jsfiddle.net/CxV9c/" rel="nofollow noreferrer">JSFiddle where it can be tried is here</a>.</p>
  
  <p>How can I do this using jQuery?</p>