Link to home
Start Free TrialLog in
Avatar of sana2009fall
sana2009fall

asked on

Dynamically create Select menu using javascript and XMl

Hi,

I am new to Javascript who is struck up with the problem of creating select menu dynamically with the help of createElement,setAttribute,appendchild,getElementbyID and so on commands.
A constructor method is required for the creation of selection menu.. Minimum of atleast 4 levels required in select menu..
Dont know how to start..

Thanks in Advance

Avatar of Pramod Kumar
Pramod Kumar
Flag of India image

See below sample code
<html>
<head>
  <script language='javascript'>
 
    function addBox() {
      var cb  = document.createElement('<select>');
      var t  = document.getElementById('tbl');
 
	for(var x=0; x<4; x++){
		var opt = document.createElement("option");
		opt.text = "Text "+x;
	        opt.value = "Value"+x;
		cb.options.add(opt);
	}	
 
 
      t.appendChild(cb);
    }
 
  </script>
 
</head>
<body>
  <input type=button value='Create Box' onClick='javascript:addBox()'>
 
   <div id=tbl>
 
   </div>
 
</body>
</html>
 

Open in new window

Avatar of sana2009fall
sana2009fall

ASKER

Hi,

This code forms the base of select menu. These are my requirements:
  • Dynamically creating form elements depending upon the answer of the last question.
  • Once the user has made the selections, create a new node to print out their final choices to the screen.
  • Get the user the option to start over at any time..
  • the use of cookies in the above problem...
  • CreateElement,setAttribute,appendchild,getElementByID,getElementByTagName,CreateTextNode,nodevalue etc..
  • USe of XMl and Javascript for the data
Thanks in advance
Is this homework?
No
I have gone through the possible solutions related to dynamic select menu or chained select menu.
But when there are more than three, how do we proceed ??
Instead of arrays can we use data from Xml?
I post this yesterday to bad thread...
Where do you imagine to get the xml data ?
<html>
<head>
        <script language="javascript">
                function mybut() {
 
                        // add new button1
                        var ni = document.getElementById('myDiv');
                        var newdiv = document.createElement('div');
                        var divIdName = 'myDivMenu';
                        newdiv.setAttribute('id',divIdName);
                        newdiv.innerHTML = '<select name="mymenu" id="mymenu"><option value="1">Menu1</option><option value="2">Menu 2</option><option value="3">Menu 3</option><option value="4">Menu 4</option></select>';
                        ni.appendChild(newdiv);
 
                }
 
                function doit() {
                }
 
 
        </script>
    </head>
    <body>
    <div id="myDiv"></div></div>
    <input name="b2" type="button" id="button2" onClick="mybut();" value="Create Select" />     
    
</body></html>

Open in new window

Hi,

I am totally new to javsacript and xml.. Can we use get the options in the select menu from XMl file ??
The select menu should be generated Dynamically depending upon the answer of the last question.

Thanks
Sorry for the above mess... Here is my problem.. I want to create a dynamic select menu..
 The second menu should be dynamically generated based upon the answer to the First question..
I have come across many solutions but those are limited to 2 levels.

Thanks in advance
ASKER CERTIFIED SOLUTION
Avatar of Panchux
Panchux
Flag of Argentina image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks a lot,

Just a small query, How to print the selected values from the menu ??
if((w+'')+i==data){
    opt.setAttribute('selected', 'true');  
    }

That piece of code only executes if you are processing your selected index so you may add something to create an element in the DOM (i.e. optn=document.creteElement('div'); optn.appendChild(document.createTextNode(eval('c'+w)[i]));
) and append it to a container.
if((w+'')+i==data){
    opt.setAttribute('selected', 'true');   
    optn=document.creteElement('div');
    optn.appendChild(document.createTextNode(eval('c'+w)[i]));
    document.getElementById('container').appendChild(optn);
    }

Open in new window

How do we display Images dynamically based on the selected options ??