Dynamically create Select menu using javascript and XMl: Javascript, XML, Ajax, Web Development

by: pramodkrjsrPosted on 2009-09-26 at 22:47:36ID: 25432888

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>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:

Select all Open in new window

by: sana2009fallPosted on 2009-09-27 at 05:55:34ID: 25433879

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

by: HonorGodPosted on 2009-09-27 at 06:32:13ID: 25433958

Is this homework?

by: sana2009fallPosted on 2009-09-27 at 06:53:40ID: 25433996

No

by: sana2009fallPosted on 2009-09-27 at 08:55:05ID: 25434295

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?

by: leakim971Posted on 2009-09-27 at 13:37:58ID: 25435389

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>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:

Select all Open in new window

by: sana2009fallPosted on 2009-09-27 at 14:18:40ID: 25435532

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

by: sana2009fallPosted on 2009-09-27 at 14:34:36ID: 25435598

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

by: PanchuxPosted on 2009-09-27 at 16:37:13ID: 25435952

I've made a simple script that will generate N nested combo boxes.

For testing porpuses I used the arrays index as "ids" but you may add a second array for each one with the real id or use ":" or another character to separate id from name and the use the split method to create an array and use it to feed the option tag.

I used a table but you can append child to divs. Modify as needed.

For parsing an XML file I leave you this link

http://www.hiteshagrawal.com/javascript/javascript-parsing-xml-in-javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
<!--
html, body{
	margin:0;
	padding: 0;
	height: 100%;
	}
 
body, table, select{
	font: 300 11px Verdana;
	}
	
select{
	border: 1px solid #3f3f3f;
	background-color: white;
	}
-->
</style>
<script type="text/javascript">
<!--
var c=new Array('Select...','Flowers','Animals','Cars');
 
var c1=new Array('Select...','Wild','Exotic','Tropical');
var c11=new Array('African Daisy','Baby Blue Eyes','Catchfly');
var c12=new Array('Birds of Paradise','Gladiolus','Orchids');
var c13=new Array('Musa Coccinia','Hel Red Wagneriana','Calathea Lutea');
 
var c2=new Array('Select...','Canines','Aves','Felines');
var c21=new Array('Dog','Wolf','Fox');
var c22=new Array('Hawk','Eagle','Vulture');
var c23=new Array('Cat','Lion','Panther');
 
var c3=new Array('Select...','Fiat','Ferrari','Ford');
var c31=new Array('Idea','Punto','Linea');
var c32=new Array('612','430','458');
var c33=new Array('Focus','Fusion','Taurus');
 
function doPopulate(data){
	if (data!=0 && eval('c'+data)){
		
		var x = document.getElementById('mainTable');
		var y = x.cloneNode(false); // no child nodes;
		x.parentNode.replaceChild(y,x);
		doFirst(data.substring(0,1));
		
		for(j=0; j<data.length; j++){
		
			w=data.substring(0,j+1)
		
			var tRow=document.createElement('tr');
			var tData=document.createElement('td');
			var sel=document.createElement('select');
			sel.setAttribute('name', 'c'+w);
			sel.setAttribute('onchange', 'doPopulate(this.value);');
			var opt;
			
			var y='c'+w;
			var x=eval(y);
			
			for(i=0; i<x.length; i++){
				opt=document.createElement('option');
				if((w+'')+i==data){
					opt.setAttribute('selected', 'true');	
					}
				opt.setAttribute('value', (w+'')+i);
				opt.appendChild(document.createTextNode(eval('c'+w)[i]));
				sel.appendChild(opt);
				}
				
			tData.appendChild(sel);
			tRow.appendChild(tData);
			document.getElementById('mainTable').appendChild(tRow);
			}
 
		}
	else{
		var x = document.getElementById('mainTable');
		var y = x.cloneNode(false); // no child nodes;
		x.parentNode.replaceChild(y,x);
		doFirst();
		}
	}
	
function doFirst(data){
	var i;
	
	var tRow=document.createElement('tr');
	var tData=document.createElement('td');
	var sel=document.createElement('select');
	sel.setAttribute('name', 'categories');
	sel.setAttribute('onchange', 'doPopulate(this.value);');
	var opt;
	
	for(i=0; i<c.length; i++){
		opt=document.createElement('option');
		if(i==data){
			opt.setAttribute('selected', 'true');	
			}
		opt.setAttribute('value', i);
		opt.appendChild(document.createTextNode(c[i]));
		sel.appendChild(opt);
		}
		
	tData.appendChild(sel);
	tRow.appendChild(tData);
	document.getElementById('mainTable').appendChild(tRow);
	}
 
//-->
</script>
</head>
<body onload="doFirst();">
<table cellpadding="4" cellspacing="4" border="0">
	<tbody id="mainTable">
	</tbody>
</table>
</body>
</html>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:

Select all Open in new window

by: sana2009fallPosted on 2009-09-28 at 07:18:20ID: 31634058

Thanks a lot,

Just a small query, How to print the selected values from the menu ??

by: PanchuxPosted on 2009-09-28 at 08:02:43ID: 25439935

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);
    }

1:
2:
3:
4:
5:
6:

Select all Open in new window

by: sana2009fallPosted on 2009-10-04 at 17:23:04ID: 25491647

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

Question

Dynamically create Select menu using javascript and XMl

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

Javascript

XML

Ajax

Web Development

JavaScript

JScript

Scripting Languages

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Need individual assistance?

Our experts are ready to help.

Want to learn from the best?

Read articles from industry experts.

Working on a long term project?

Store your work and research.

What Makes Experts Exchange Unique?

Trusted by the world's most respected brands.

Faithfully serving IT professionals since 1996.

Related Solutions

Free Tech Articles

Cloud Class Webinars

Join the Community

Give a Little. Get a Lot.

Answers

3 Ways to Join

The Experts

The Experts

Testimonials

Testimonials

Testimonials

Business Clients

Business Clients

In the Press

In the Press

In the Press