Drop Down Box or Add in text option

[adalby]

I'm looking for a javascript that can do both on a drop down list of either select an option or type a new drop down option in.

Has anyone seen a script like this?

[plepper]

try this:

<select id="myselect" onchange="checkAddNew(this);">
<option value="Bob">Bob</option>
<option value="Sue">Sue</option>
<option value="--new--">Add New User</option>
</select>
<input type="text" id="newOptionInput" style="display:none" onblur="addNewOption(this);">

<script language="JavaScript">
<!--
//
// this function is called when the user selects something from the dropdown
//
function checkAddNew(ele)
{
  if (ele.value == '--new--') {
    //
    // if they chose to create a new entry in the dropdown
    //
    // grab our hidden input
    var inp = document.getElementById('newOptionInput');
    if (inp) {
      // and make it visible
      inp.style.display = 'inline';
      // and set the user's focus to it
      inp.focus();
    }
  }
}

//
// this function is called when the user has finished typing in the new option textbox
//
function addNewOption(ele)
{
  if (ele.value.length > 0) {
    //
    // if they typed anything
    //
    // get the selectbox that we're adding the option to
    var sel = document.getElementById('myselect');
    if (sel) {
      // remove the --new-- option from the selectbox
      sel.options[sel.options.length-1] = null;
      // create a new option, and set it to be the selected option
      sel.options[sel.options.length] = new Option(ele.value,ele.value,true,true);
      // recreate the add new option
      sel.options[sel.options.length] = new Option('Add New User','--new--');
    }
  }
  // clear the textbox so that it's blank the next time they try to do this
  ele.value='';
  // and hide it until we need it again
  ele.style.display = 'none';
}
//-->
</script>

if you don't care about letting them add multiple, drop the "new Option('Add New User'..." line.

if you want to be a little more clean, instead of setting [options.length-1]=null, save it off and re-add it after you've created your new option from what they typed.

also, you can do duplicate checking, you can loop through the sel.options array to make sure that what they just typed isn't already in the dropdown.

[adalby]

Thanks plepper this is perfect! Thanks for the help!