Tuesday, December 21, 2010

An HTML select that allows user created options

I was thinking the other day that it would be useful to have a select option that people could also put their own options into on the fly.  Obviously you wouldn't do this if you wanted completely normalization, but many times I have made selects with an "other" option, and then below put a text field "If you have selected "other" please tell us what your preference is.

This is meant to address that.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

A simple way to have a dropdown that also allows user input.  If the user choses "other" from the dropdown, he/she will
be shown a text field into which he/she can put a new option.  When the user clicks save, the option will be added to
the select and made as the selected item.  There is a place in the code where you can call the onchange after a new value is added, or comment out that if desired.

// Daniel Fishman
// 2010-12-21
// Released to the public domain.

<style type="text/css">


<script type="text/javascript">
    function localOnchange(lid,allowOther){
        var mySelect=document.getElementById(lid);
        var postKey=mySelect.name;
        var postData=mySelect.options[mySelect.selectedIndex].value;
        if(postData == "other" && allowOther == "true"){
            document.getElementById(lid+'_select_div').className = "hidden";
            document.getElementById(lid+'_input_div').className = "show";
            alert('perform regular onchange with '+postData)

    function updateSelect(lid){
        var newVal=document.getElementById(lid+"_text").value;
        if(newVal == "")return;
        var mySelect=document.getElementById(lid);
        //insert the new value in alphgabetical order.  If this select is not in alphabetical order, tough
        for (var x = 0;x <mySelect.length; x++) {
          var postData=mySelect.options[x].value;
          if (newVal < postData || mySelect.options[x].value == 'other') {
              var elOptNew = document.createElement('option');
              elOptNew.text = newVal;
              elOptNew.value = newVal;
              try {
                mySelect.add(elOptNew, mySelect.options[x]); // standards compliant; doesn't work in IE
              catch(ex) {
                mySelect.add(elOptNew, x); // IE only
              //uncomment below line for onchange behavior
              alert('perform regular onchange with '+newVal);
              document.getElementById(lid+'_select_div').className = "show";
              document.getElementById(lid+'_input_div').className = "hidden";
              //reset the div color


    function cancel(lid){
        document.getElementById(lid+'_select_div').className = "show";
        document.getElementById(lid+'_input_div').className = "hidden";
<div class="show" id="sid_select_div">

<!--you could call localOnchange with('sid','false'), and then it will do the normal onchange behavior-->

    <select onchange="localOnchange('sid','true')" id="sid" name="objectName">
        <option value="Dog">Dog</option>
        <option value="Cat">Cat</option>
        <option value="Bird">Bird</option>
        <option value="Person">Person</option>
        <option value="Snake">Snake</option>
        <option value="Bear">Bear</option>
        <option value="other">other</option>


<div class="hidden" id="sid_input_div">

    Enter the new value:&nbsp;<input type="text" value="" id="sid_text">
<a href="javascript:updateSelect('sid')">save</a>
<a href="javascript:cancel('sid')">cancel</a>


No comments :