0

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
5
Views
8 Years
Discussion Span
Last Post by essential
0

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>
0

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

0

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...

0

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>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.