Dropdown list to a text field with jQuery?

Question

I would like to have a dropdown list with options A, B, C and Custom. When custom is selected, the dropdown would be replaced by a text field so that the user can provide a custom name, if he wishes so.

So, first we have something like this

<select id="foo" name="foo">
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
  <option value="custom">Custom</option>
</select>

And after custom is selected, the whole dropdown list would transform to this:

<input name="foo" type="text" />

Bad user experience design, since the user cannot change his mind and select another option after the select box is replaced.. Better to just show/hide an additional input box when the custom is selected/deselected.. — Gabriele Petrioli
– Gabriele Petrioli, Commented Jan 8, 2011 at 13:16
Unless you switch it back with the new option (although I would be inclined to rather show the input box when custom is selected and hide it the rest of the time) - i.e. no change to visibility of the dropdown. — jcuenod
– jcuenod, Commented Jan 8, 2011 at 18:44

Darin Dimitrov · Accepted Answer · 2011-01-08 13:07:39Z

5

Here's a demo using the .replaceWith() function:

$('#foo').change(function() {
    if ($(this).val() === 'custom') {
        $(this).replaceWith('<input name="foo" type="text" />');
    }
});

answered Jan 8, 2011 at 13:07

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jcuenod · Accepted Answer · 2011-01-08 13:09:50Z

1

How about this:

$('select.foo').bind('change', function(event) { 
 if ($(this).val() == "Custom")
 {
  $(this).hide()
  $("input.foo").show()
 }
});

you could bind the lost focus event of the input box to redisplay the dropdown and add it as an option if you want (just give the custom option an id and then change its text)...

answered Jan 8, 2011 at 13:09

jcuenod

58.9k15 gold badges71 silver badges103 bronze badges

Comments

Leslie · Accepted Answer · 2011-01-08 13:42:52Z

1

Here is a way to do it without hiding the select box, for better user experience according to @Gaby above.

It shows a text box when 'custom' option is selected and hides it when anything else is selected.

    $('#foo').change(function()
    {
      var $this = $(this),
      id = $this.attr('id'),
      $txt = $('input:text[name=' + id + ']');
      if ( $this.val() == 'custom')
      {
         if ($txt.length == 0)
         {
            $txt = $('<input type="text" name="'+ id +'" />');
            $this.after($txt);
          }
          $txt.show().focus();
      }
      else
      {
          $txt.hide();
      }
});

answered Jan 8, 2011 at 13:42

Leslie

612 bronze badges

Comments

Gabriele Petrioli · Accepted Answer · 2011-01-08 13:17:17Z

0

$('#foo').click(
function()
{
if($(this).val()==="custom")
{
//either toggle the select and input button
//or add markup here. and clear the old amrkup
}

});

edited Jan 8, 2011 at 13:17

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

answered Jan 8, 2011 at 13:07

Baz1nga

15.6k3 gold badges38 silver badges63 bronze badges

1 Comment

jcuenod Over a year ago

Wouldn't this only trigger when, while custom is selected, the user clicks the dropdown?

Collectives™ on Stack Overflow

Dropdown list to a text field with jQuery?

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related