Lorenzo said:
I would like to have an element, a text string, change into a select
when a mouseover occurs and then change back to text when a selection
is made or when a mouse out occurs. I looked a t using dojo for this,
http://dojotoolkit.org, but this will end up on a production server,
where dojo is not installed and cannot be installed. So, I need
another solution. Can someone give some pointers on how this might be
done?
TIA
Do you know the contents of the select list ahead of time? If so,
there's no call for AJAX here.
Something like this should do the trick:
<div onmouseover="ShowSelect(this);">
<span>The Original Text</span>
<select name="PostbackName" onchange="ChangeText(this)"
style="display: none;">
<option value="The Original Text">The Original Text</option>
<option value="Some Other Text">Some Other Text</option>
<option value="Yet Another Option">Yet Another Option</option>
</select>
</div>
And the script:
function ShowSelect(div)
{
//hide the span and show the select box
div.getElementsByTagName("span")[0].style.display = "none";
div.getElementsByTagName("select")[0].style.display = "";
}
function ChangeText(select)
{
var span = select.parentNode.getElementsByTagName("span")[0];
//remove text from the span
while(span.childNodes.length > 0)
span.removeChild(span.childNodes[0]);
//add the select box's text to the span
span.appendChild(document.createTextNode(select.options[select.selectedIndex].value));
//show the span and hide the select box
select.style.display = "none";
span.style.display = "";
}
Note that you MUST include the value attribute of the option tags, or
(in IE) you will be unable to get the value of the option without a big
fat hassle.
Jeremy
