Member Avatar for nileema

hi
I want to add combobox dynamicaly on onclick event of button .
On next page i want to get that selected item of each combo.
How would i get the id each combo?

  • 2 Contributors
  • 4 Replies
  • 662 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by essential

Recommended Answers

All 4 Replies

Member Avatar for essential

This is a quick example on how to create a dynamic dropDown list. I hope this will keep you goin! Enjoy coding...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Some Title</title>
<script type="text/javascript">
<!-- BEGIN HIDING 

function dropDownList()
{ 
 var _items = [ 'item1', 'item2', 'item3', 'item4' ];
 var container = document.getElementsByTagName('div')[1];
 var _button = document.getElementsByTagName('input')[0];
 var _select = document.createElement('select');
for ( var x = 0; x < _items.length; x++ ) {
 _option = document.createElement('option');
 var _text = document.createTextNode(_items[x]);
 _option.appendChild(_text);
 _select.appendChild(_option); 
 _option.value = _items[x]; } 
 container.appendChild(_select);
 _select.setAttribute('name', 'list'); 
 _button.value = 'Show Items!';
 _button.setAttribute('onclick', 'showItems(\'items\');');
}
function showItems(id)
{ 
var itemHolder = document.getElementById(id);
var _list = myform.list.options;
var show_list = '<b>'+ _list[0].value + '<br />';
show_list += _list[1].value +'<br />'; 
show_list += _list[2].value + '<br />';
show_list += _list[3].value + '</b>';
 itemHolder.innerHTML = show_list;

}
// DONE HIDING-->
</script>
</head>
<body>
<div>
<form name="myform" onsubmit="return false;">
<div>&nbsp;</div><br />
<input type="button" name="button1" value=" Show Me! " onclick="dropDownList()" />
</form>
</div>
<div id="items">&nbsp;</div>
</body>
</html>
Member Avatar for nileema

Thanx for code, it works!
but i want to add 3 combo dynamicaly on onclick event one after other , when page is reload!

Member Avatar for essential

Sorry if i take u this long, am just busy with some other stuff here! So you want a total of 3 combo that add up next after the other when the page is reloaded? Having a 3 combo b4 the page reloads
is quite easy! But if you prefer 3 combo onafter the page is reloaded, then i need to get some extra time 2 work on it! Tnx...

Member Avatar for essential

Please feel free to modify this code to match your needs. If you have any question regarding this code you can document.write('Me on my inbox'). lol! Have a good day...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating Dynamic Combo</title>
<style type="text/css">
<!--
*{}
form { margin: 6px; padding: 4px; text-align: left; font-weight: bold; color: dimgrey; }
form select { margin: 6px 0 6px 0; padding: 2px; color: grey; }
form input[type=button] { background-color: black; color: silver; }
-->
</style>
<script type="text/javascript">
<!-- BEGIN HIDING
<!-- ADDING COMBO -->
//--> REMODIFIED <--\\
//You will love this 1 compare to my 1st version!
//This will create 3 combo boxes with 2sec. delay.
//If you wish to load this one by one each time the page reloads.

/* just create a cookie function that holds a counter and assign it to the variable n */

//Enjoy Coding and bye for now!

function AddCombo()
{ 
 
 var _form = document.getElementsByTagName('form')[0];
 var _button = document.getElementsByTagName('input')[0];
 _button.setAttribute('onclick', 'return false;');
n = 1;
t = setTimeout('AddCombo()', 2000);
t = ( t == 3 ) ? clearTimeout(t) : t;
s = '3';
s = ( t == 1 ) ? '1' : s;
s = ( t == 2 ) ? '2' : s; 

do
{
  items = [ 'Combo' + s + ' Option List 1', 'Combo' + s + ' Option List 2', 'Combo' + s + ' Option List 3' ];

 _select = document.createElement('select');
for ( var x = 0; x < items.length; x++ ) {
 _option = document.createElement('option');
_br = document.createElement('br'); 
_item = document.createTextNode(items[x]);
_text = document.createTextNode('Selection ' + s );
_option.appendChild(_item);
_select.appendChild(_option);
_text.insertBefore(_select);

_option.value = items[x]; }
_form.appendChild(_br);
_form.appendChild(_text);
_form.appendChild(_select);
_select.setAttribute('id', 'select' + s); 
n++; 
} while( n < t ); 
} 

// DONE HIDING -->
</script>
</head>
<body>
<form name="form1" action="#" onsubmit="return false;">
</form><br />
<form name="form2" action="#" onsubmit="return false;">
<input type="button" name="button1" value=" Show Me " onclick="AddCombo();" />
</form>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.