change text / input box into Select box onClick? 1

[birney29]

im looking to change a text box i have (which contains "male" or "female&quot into a drop down list (containing both "male" and "female&quot on click. here is what i have so far ....

 Javascript ******

var dropDownObject = [ { text:  "Male",
                 	value: "Male" },
               		{ text:  "Female",
                	 value: "Female" },
			 ];

 function fillSelect() {
	
        var select = document.getElementById( 'gender' );
        var options = select.options;

        options.length = 0;
	
        for( var i = 0; i < dropDownObject.length; i++ ) {
            options[ options.length ] = new Option( dropDownObject[i].text, dropDownObject[i].value);

        }
	
	 
    }


html/xsl **********

 <input type=&quot;text&quot; name=&quot;gender&quot; id = &quot;gender&quot; datasrc= &quot;#xmlData&quot; datafld=&quot;gender&quot;>
        	<xsl:attribute name=&quot;value&quot;><xsl:value-of select=&quot;Title&quot;/></xsl:attribute>
 		<xsl:attribute name=&quot;onclick&quot;> fillSelect() </xsl:attribute>
</input>
 Kenneth Birney
User Interface Programmer
Scottish Police

 

[jaredn]

<script>
function textToSelect(o)
{
var sel,i,valar,valen;

sel = document.getElementById(o.id+&quot;_sel&quot;

if(sel.filled==0)
{
valar = o.values.split(&quot;,&quot;
valen = valar.length;

for(i=0;i<valen;i++)
{
sel.options.add(new Option(valar,valar))

}


sel.onclick=function()
{
var inp;

inp = document.getElementById(this.id.split(&quot;_sel&quot[0]);
inp.value=this.value;

inp.style.display = 'block';
this.style.display = 'none';
}

sel.filled = 1;
}

sel.style.display = 'block';
o.style.display = 'none';
}
</script>

<input id=&quot;gender&quot; onfocus=&quot;textToSelect(this)&quot; type=&quot;text&quot; values=&quot;male,female&quot; name=&quot;gender&quot; />
<select filled=&quot;0&quot; id=&quot;gender_sel&quot; style=&quot;display:none&quot;></select>

I just whipped this up rather quickly for you, so there may be some bugs present. To use this, be sure you create an input and select box for each item you wish to use in this way. Also, be sure to supply a comma-delimted list of acceptable values in your text-box.

For a more robust solution, take a look at my ComboBox at WebFX:

http://webfx.eae.net/dhtml/combobox/combobox.htm

jared@eae.net -

http://webfx.eae.net