title: Drop down text input option
body: <p>I want a drop down element where user can select from available options or select enter value option which in turn allows to enter value.
  I specifically want that user can enter value only when they select "Enter a value " option.</p>
  
  <p>Here is what I have tried so far.</p>
  
  <p>HTML-</p>
  
  <pre><code>&lt;div class="ginput_container"&gt;
      &lt;select name="input_4" id="input_1_4" class="medium gfield_select" tabindex="15"&gt;
         &lt;option value="0"&gt;None&lt;/option&gt;
         &lt;option value="155"&gt;1-70&lt;/option&gt;
         &lt;option value="185"&gt;71-250&lt;/option&gt;
         &lt;option value="*"&gt;Enter value&lt;/option&gt;
      &lt;/select&gt;
      &lt;input type="text" value="None" class="holder" &gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript-</p>
  
  <pre><code>jQuery(".gfield_select").change(function() {
          var val = jQuery(this).val();
          var enter = jQuery(this).parent().find('option:selected').text();
          var x = jQuery(this).parent();
          if (enter ==="Enter a value" || enter === "Enter value"){
            var holder = x.find('.holder');
            holder.val('');          
            holder.prop('disabled',false);
            holder.focus();
          } else {
            x.find('.holder').val(x.find('option:selected').text());
          }
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/wTumv/1/" rel="nofollow">JS fiddle</a></p>
  
  <p>however it wont work properly if i click the enter value option again.</p>