how to display onclick result?

[runrunforest]

hi,

I have a drop down menu, I want the item in the menu displays in a div tag when chosen. any one knows how ?

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="http://cnn.com">Singapore</a>'
menu2[1]='<a href="http://msnbc.com">australia</a>'
menu2[2]='<a href="http://news.bbc.co.uk">france</a>'
menu2[3]='<a href="http://cnn.com">new zealand</a>'
menu2[4]='<a href="http://cnn.com">england</a>'
 
 
 
var menuwidth='162px' //default menu width
var menubgcolor='white'  //menu bgcolor
var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?
 
 
var ie4=document.all
var ns6=document.getElementById&&!document.all
 
if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
 
function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
 
 
function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}
 
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
 
function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}
 
function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}
 
 
function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)
 
if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}
 
return clickreturnvalue()
}
 
function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}
 
function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
 
function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}
 
function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}
 
function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}
 
function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}
 
if (hidemenu_onclick=="yes")
document.onclick=hidemenu

<div>
  <input type="radio" name="radio" id="radio" value="radio" />
  <label for="radio">America</label>
</div>
<a href="default2.htm" onClick="return dropdownmenu(this, event, menu2, '100px')" onMouseout="delayhidemenu()">Change region </a>

the chosen item should appear in div above as a radio button option

[JsD2K]

Why are you using code for internet explorer 4 and (i asume NS6 is netscape 6) netscape? No one uses them

[runrunforest]

Why are you using code for internet explorer 4 and (i asume NS6 is netscape 6) netscape? No one uses them

I collected it from the internet.

It works terrifically why not.

[paul_wilkins]

Why not? Because all code gets old and out of date.

This is how easy it is to do now-a-days, in this case with jquery.
If you don't want to use jquery then standard javascript isn't much more complex than what's shown.

$(document).ready(function () {
    var select = '#mySelect';
    $(select).change(function () {
        $(select + ' option').each(function () {
            $('#' + this.value).hide();
        });
        $(selected + ' option:selected').each(function () {
            $('#' + this.value).show();
        });
    }).change();
});

[runrunforest]

Why not? Because all code gets old and out of date.

This is how easy it is to do now-a-days, in this case with jquery.
If you don't want to use jquery then standard javascript isn't much more complex than what's shown.

$(document).ready(function () {
    var select = '#mySelect';
    $(select).change(function () {
        $(select + ' option').each(function () {
            $('#' + this.value).hide();
        });
        $(selected + ' option:selected').each(function () {
            $('#' + this.value).show();
        });
    }).change();
});

I am not sure how to implement the code above correct, as i added it to the code flow, run the code, nothing changed in the div box.

I am learning php, i find that javascript is very similar to php , in my design involving pretty much java script and PHP is essential part to get my site running as intended. Should I learn javascript first instead of learning php then go back to javascript ?

[paul_wilkins]

I am not sure how to implement the code above correct, as i added it to the code flow, run the code, nothing changed in the div box.

I am learning php, i find that javascript is very similar to php , in my design involving pretty much java script and PHP is essential part to get my site running as intended. Should I learn javascript first instead of learning php then go back to javascript ?

The above code is jquery code, so you will require the jquery plugin too.
jQuery is designed to handle all of the strange quirks of the web browsers that it runs on (like most libraries out there), so that you can code in an clear and understandable manner.

[runrunforest]

jQuery is designed to handle all of the strange quirks of the web browsers that it runs on (like most libraries out there), so that you can code in an clear and understandable manner.[/QUOTE]

so why would people still using javascript ?

[paul_wilkins]

You might as well ask why do people speak in [language] when [other-language] is so much better.

The answer to both that and your question is, because people differ.

[runrunforest]

Well Paul, I am still ambiguous. You need to show me the trick.

Base on this code below can you help me to get the result of drop down menu put into the div with id="two" ?

#dropmenudiv {
	position:absolute;
	border:1px solid #3B5998;
	line-height:20px;
	z-index:100;
	text-align:left;
	padding:7px 0 8px 0;
}
#dropmenudiv a {
	width: 100%;
	display: block;
	text-indent: 26px;
	text-decoration: none;
}

<div id="one">        
<input name="radio" type="radio" id="globe" value="globe" checked="checked" />
<label for="globe">GLOBE</label> 
</div>  
<div id="two">  
<input name="radio" type="radio" id="USA" value="USA" />
<label for="USA">USA</label>
</div>

<span class="fltlft"><a href="default2.htm" onclick="return dropdownmenu(this, event, menu2, '120px')" onmouseout="delayhidemenu()">Khu vực kh&#225;c </a></span>

var menu2=new Array()
menu2[0]='<a href="http://badede.com">Singapore</a>'
menu2[1]='<a href="http://badede.com">England</a>'
menu2[2]='<a href="http://badede.bbc.co.uk">Australia</a>'
menu2[3]='<a href="http://badede.com">NewZealand</a>'
 
 
 
 
var menuwidth='162px' //default menu width
var menubgcolor='white'  //menu bgcolor
var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?
 
 
var ie4=document.all
var ns6=document.getElementById&&!document.all
 
if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
 
function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
 
 
function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}
 
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
 
function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}
 
function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}
 
 
function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)
 
if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}
 
return clickreturnvalue()
}
 
function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}
 
function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
 
function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}
 
function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}
 
function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}
 
function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}
 
if (hidemenu_onclick=="yes")
document.onclick=hidemenu

[JsD2K]

Can jquery do everything that javascript can?

[paul_wilkins]

Add an event handler to the dropdown menu

function dropdownmenu(obj, e, menucontents, menuwidth){
	...
	if (ie4||ns6){
		...
		dropmenuobj.onclick = processDropDownMenu;
	}
	return clickreturnvalue()
}

When someone clicks on one of the dropmenu links, get the name of it and add an option to the two section.

function processDropDownMenu(evt) {
	evt = evt || window.event;
	var targ = evt.target || evt.srcElement;
	addOptionToTwo(targ.innerHTML);
	return false;
}
function addOptionToTwo(name) {
	var el = document.getElementById('two');
	el.appendChild(newLabelledInput(name));
}

When creating a lebelled input, from your current design it means returning more than one element, so we'll put them together in a document fragment that can contain multiple objects.

function newLabelledInput(name) {
	var container = document.createDocumentFragment();
	var label = document.createElement('label');
	var input = document.createElement('input');
	var text = document.createTextNode(name);
	input.name = name;
	input.type = 'radio';
	input.id = name;
	input.value = name;
	label.forName = name;
	label.appendChild(text);
	container.appendChild(input);
	container.appendChild(label);
	return container;
}

[oddz]

Can jquery do everything that javascript can?

Jquery is a javascript framework not a separate language. In that respect jquery normalizes and provides a host of functions for common tasks. Anything you can accomplish with it could be accomplished without it – given you create the functionality rather then relying on jquery.

[runrunforest]

when I click on the link it leads to an error page

This is the script

var menu2=new Array()
menu2[0]='<a href="http://badede.com">Singapore</a>'
menu2[1]='<a href="http://badede.com">England</a>'
menu2[2]='<a href="http://badede.bbc.co.uk">Australia</a>'
menu2[3]='<a href="http://badede.com">NewZealand</a>'
 
 
 
 
var menuwidth='162px' //default menu width
var menubgcolor='white'  //menu bgcolor
var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?
 
/////No further editting needed
 
var ie4=document.all
var ns6=document.getElementById&&!document.all
 
if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
 
function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
 
 
function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}
 
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
 
function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}
 
function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}
 
 
function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)
    if (ie4||ns6){
        dropmenuobj.onclick = processDropDownMenu;
    }
    return clickreturnvalue()
}
 
function processDropDownMenu(evt) {
    evt = evt || window.event;
    var targ = evt.target || evt.srcElement;
    addOptionToTwo(targ.innerHTML);
    return false;
}
function addOptionToTwo(name) {
    var el = document.getElementById('two');
    el.appendChild(newLabelledInput(name));
}
 
function newLabelledInput(name) {
    var container = document.createDocumentFragment();
    var label = document.createElement('label');
    var input = document.createElement('input');
    var text = document.createTextNode(name);
    input.name = name;
    input.type = 'radio';
    input.id = name;
    input.value = name;
    label.forName = name;
    label.appendChild(text);
    container.appendChild(input);
    container.appendChild(label);
    return container;
}
 
 
if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}
 
return clickreturnvalue()
}
 
function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}
 
function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
 
function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}
 
function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}
 
function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}
 
function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}
 
if (hidemenu_onclick=="yes")
document.onclick=hidemenu

[paul_wilkins]

Don't forget about the ... stuff after the ie4||ns6 line

[runrunforest]

what should i place in that ... ?

[paul_wilkins]

The original code was:

if (ie4||ns6){
    showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
    dropmenuobj.x=getposOffset(obj, "left")
    dropmenuobj.y=getposOffset(obj, "top")
    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

and I was saying to update it to

if (ie4||ns6){
    ...
    dropmenuobj.onclick = processDropDownMenu;
}

so that in the end it should be (have included semicolons here too)

if (ie4||ns6){
    showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth);
    dropmenuobj.x=getposOffset(obj, "left");
    dropmenuobj.y=getposOffset(obj, "top");
    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px";
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px";
    dropmenuobj.onclick = processDropDownMenu;
}

[runrunforest]

how can i make the onlick result replace the primarily option

For instance, I click singapore in the dropdown menu, the usa will be replaced by singapore. And singapore is automatically checked. there should be no more than one onclick result applying to the div element.

I forgot to include USA in the dropmenu so the modified list code below

var menu2=new Array()
menu2[0]='<a href="http://badede.com">Singapore</a>'
menu2[1]='<a href="http://badede.com">England</a>'
menu2[2]='<a href="http://badede.bbc.co.uk">Australia</a>'
menu2[3]='<a href="http://badede.com">NewZealand</a>'
menu2[4]='<a href="http://badede.com">USA</a>'

[paul_wilkins]

You would do that by emptying the contents of "two" and placing the labelled input in there instead.

I've tidied up processDropDownMenu so that the "two" element, the link text and what we're doing with them is clear.

function processDropDownMenu(evt) {
    var el = document.getElementById('two'),
        linkText = eventTarget(evt).innerHTML;
    replaceContentWithOption(el, linkText);
    return false;
}

Getting the target element from an event is a very common piece of code, so it's out as a separate function now.
I'm actually going to add this in to my common.js library because it will be very useful there.

function eventTarget(evt) {
    evt = evt || window.event;
    return evt.target || evt.srcElement;
}

Instead of adding an option we are now replacing the existing content. Emptying the contents of an element is also a common task so it's broken out into a separate function too. The labelled input isn't an input as such, but an option, so a name change has occured here too.

function replaceContentWithOption(el, name) {
    emptyContent(el);
    el.appendChild(labelledOption(name));
}

It's quite common to want to empty the contents of an element. Using a separate function here helps to remove the clutter of what's being done, so that with the previous function we can focus more clearly on the intent of what's being done instead.

function emptyContent(el) {
    while (el.hasChildNodes()) {
        el.removeChild(el.firstChild);
    }
}

And to finish we have the same function as newLabelledContent, just with a different name to better respresent what the function does. This function really should be split into separate functions for creating the elements with appropriate properties, but I think that what we have here for now should do perfectly well.

function labelledOption(name) {
    var container = document.createDocumentFragment();
    var label = document.createElement('label');
    var input = document.createElement('input');
    var text = document.createTextNode(name);
    input.name = 'radio';
    input.type = 'radio';
    input.id = name;
    input.value = name;
    label.forName = name;
    label.appendChild(text);
    container.appendChild(input);
    container.appendChild(label);
    return container;
}

[runrunforest]

sorry Paul it isn't working, nothing happens when click on one of the array item.

the current script

var menu2=new Array()
menu2[0]='<a href="#">Singapore</a>'
menu2[1]='<a href="#">England</a>'
menu2[2]='<a href="#">Australia</a>'
menu2[3]='<a href="#">NewZealand</a>'
menu2[4]='<a href="#">USA</a>'
 
 
var menuwidth='162px' //default menu width
var menubgcolor='white'  //menu bgcolor
var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?
 
 
var ie4=document.all
var ns6=document.getElementById&&!document.all
 
if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
 
function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
 
 
function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}
 
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
 
function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}
 
function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}
 
 
function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)
 
if (ie4||ns6){
    showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth);
    dropmenuobj.x=getposOffset(obj, "left");
    dropmenuobj.y=getposOffset(obj, "top");
    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px";
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px";
    dropmenuobj.onclick = processDropDownMenu;
}
function processDropDownMenu(evt) {
    var el = document.getElementById('two'),
        linkText = getEventTarget(evt).innerHTML;
    replaceContentWithOption(el, linkText);
    return false;
}
function getEventTarget(evt) {
    evt = evt || window.event;
    return evt.target || evt.srcElement;
}
function replaceContentWithOption(el, name) {
    emptyContent(el);
    el.appendChild(newLabelledInput(name));
}
function emptyContent(el) {
    while (el.hasChildNode()) {
        el.removeChild(el.firstChild);
    }
} 
function newLabelledInput(name) {
    var container = document.createDocumentFragment();
    var label = document.createElement('label');
    var input = document.createElement('input');
    var text = document.createTextNode(name);
    input.name = name;
    input.type = 'radio';
    input.id = name;
    input.value = name;
    label.forName = name;
    label.appendChild(text);
    container.appendChild(input);
    container.appendChild(label);
    return container;
}
 
return clickreturnvalue()
}
 
function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}
 
function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
 
function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}
 
function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}
 
function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}
 
function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}
 
if (hidemenu_onclick=="yes")
document.onclick=hidemenu

[paul_wilkins]

First there was a spelling mistake, for which I apologize. hasChildNode should be hasChildNodes

Second, my testing so far has just been on Firefox, and when I looked at things on IE I saw just how horrible IE is as manipulating forms. Needless to say, there are some issues with IE that need to resolved.

When IE adds radio buttons to the page it sees them as belonging to a separate group, even though they have the same name as the other radio buttons. The problem that this causes is that you will have two radio options, both of which will be selected, which is a bad idea.

The solution to this comes from a blog posting called IE DOM Bugs which takes you through how to do things in a special IE only way, and if that fails to then do it in a more compatible way for other browsers.

First of all though here's the updated processDropDownMenu function

function processDropDownMenu(evt) {
    var el = document.getElementById('two'),
    	linkText = getEventTarget(evt).innerHTML,
        option = labelledOption('radio', linkText);
    replaceContent(el, option);
    selectRadio(el);
    return false;
}

The getEventTarget, replaceContent and emptyContent functions remain unchanged

function getEventTarget(evt) {
    evt = evt || window.event;
    return evt.target || evt.srcElement;
}
function replaceContent(el, content) {
    emptyContent(el);
    el.appendChild(content);
}
function emptyContent(el) {
    while (el.hasChildNodes()) {
        el.removeChild(el.firstChild);
    }
}

And now we get to where the big changes occur.
To simplify things I've used separate createLabel and createInput functions, because when creating form elements we should use the techniques from that blog posting so that IE doesn't have a heart attack on us.

function labelledOption(name, value) {
    var container = document.createDocumentFragment();
    var label = createLabel({'text': value, 'for': value});
    var input = createInput({'name': 'radio', 'id': value, 'value': value});
    var text = document.createTextNode(value);
    container.appendChild(input);
    container.appendChild(label);
    return container;
}
function createLabel(args) {
    var label = document.createElement('label');
    label.appendChild(document.createTextNode(args.text));
    label.htmlFor = args['for'];
    return label;
}
function createInput(args) {
    var input = createFormElement('input', args.name);
    setElementType(input, 'radio');
    input.id = args.id;
    input.value = args.value;
    return input;
}

The createElement function uses the techniques from the blog posting about IE DOM bugs. Unfortunately this is necessary to keep IE happy, but hopefully you can tell from the above coding structure that we've tried to hide the ugly parts away as best as possible.

function createFormElement(tag, name) {
   var el = null;
   try {
      el = createIEElement(tag, name);
   } catch (e) {
      el = createDOMElement(tag, name);
   }
   return el;
}
function createIEElement(tag, name, type) {
    var args = [tag];
    if (name) {
        args[args.length] = 'name="' + name + '"';
    }
    if (type) {
        args[args.length] = 'type="' + type + '"';
    }
    return document.createElement('<' + args.join(' ') + '>');
}
function createDOMElement(tag, name, type) {
    var el = document.createElement(tag);
    el.type = type;
    el.name = name;
    return el;
}

It's not over yet though, because we still need to tell the form object what type it is (a radio button) without causing IE to fall over either. Here's the code for that.

function setElementType(el, type) {
    var newEl;
    var name;
    try {
        el.setAttribute('type', type);
    } catch (e) {
        newEl = null;
        name = el.getAttribute('name');
        try {
           newEl = createElement('input', name, type);
        } catch (e) {}
        if (!newEl) {
           newEl = document.createElement('input');
           newEl.setAttribute('type', type);
           newEl.setAttribute('name', name);
        }
        if (tempStr = element.getAttribute('value')) {
           newEl.setAttribute('value', name);
        }
        el.parentNode.replaceChild(newEl, el);
    }
}

And finally, now that we have a form element that IE is capable of working with, we can select it. Because it's the only input element inside the "two" element, we can just click on the first input element.

function selectRadio(el) {
    el.getElementsByTagName('input')[0].click();
}

Sorry for the trouble there. IE causes many headaches and hassles, but this one where we are dealing with dynamically created radio or checkbox elements is one of the hardest to bang your head against.

Edit: in setElementType function an old reference to newElement renamed to newEl

[runrunforest]

Yeah, its really banging my head eventhough i am just resembling the code block

But its absolutely brilliant. It works perfectly in IE.

You're genius, Paul.