Javascript select text item from list or "Other..."

Alec Jacobson

November 08, 2011

weblog/

Here's a snippet of javascript that hooks up a "select" tag with a text field "input" tag. When the user changes the select automatically

function update(select,input)
{
  if(select.value == "Select...")
  {
    input.value = "";
    input.readOnly = false;
  }else if(select.value == "Other...")
  {
    input.value = "";
    input.focus();
    input.readOnly = false;
  }else
  {
    input.value = selector.value;
    input.readOnly = true;
  }
}

<select id="tf_select" name="tf_select"
onchange="update(this,document.getElementById('tf'));">
  <option value="">Select...</option>
  <option value="Male">Male</option>
  <option value="Female">Female</option>
  <option value="Other...">Other...</option>
</select>
<input name="tf" id="tf" type="text" readonly value="">

Try it here: