Thoughts of Dan: 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"
        "http://www.w3.org/TR/html4/loose.dtd">
<!--

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.


-->
<html>
<head>
<style type="text/css">
.hidden{
    display:none;
}

.show{
    display:block;
}
</style>

<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";
            document.getElementById(lid+'_input_div').style.backgroundColor='yellow';
        }
        else{
            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
              }
              mySelect.selectedIndex=x;
              //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
              document.getElementById(lid+'_select_div').style.backgroundColor='transparent';
              break;
          }
        }

    }

    function cancel(lid){
        document.getElementById(lid+'_select_div').className = "show";
        document.getElementById(lid+'_input_div').className = "hidden";
        document.getElementById(lid+'_select_div').style.backgroundColor='transparent';        
    }    
</script>
</head>
<body>
<div class="show" id="sid_select_div">

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

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <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>

</select>
</div>

<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>

</div>
</body>
</html>

Thoughts of Dan

Tuesday, December 21, 2010

An HTML select that allows user created options

No comments :

About Me