RSS

add combobox dynamicaly

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Views: 1170 | Replies: 4 | Thread Tools Display Modes

•

Join Date: Aug 2008

Posts: 2

Reputation: nileema is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

nileema

Offline

Newbie Poster

add combobox dynamicaly

Aug 21st, 2008

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?

•

Join Date: Aug 2008

Posts: 197

Reputation: essential is an unknown quantity at this point

Rep Power: 1

Solved Threads: 28

essential

Online

Junior Poster

Re: add combobox dynamicaly

Aug 21st, 2008

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

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<!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>
<!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>

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<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>
<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>

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
</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>
</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>

Last edited by essential : Aug 21st, 2008 at 9:52 pm.

The test of a first-rate intelligence is the ability to hold two opposed ideas in the mind at the same time, and still retain the ability to function. One should, for example, be able to see that things are hopeless and yet be determined to make them otherwise.

•

Join Date: Aug 2008

Posts: 2

Reputation: nileema is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

nileema

Offline

Newbie Poster

Re: add combobox dynamicaly

Aug 22nd, 2008

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

•

Join Date: Aug 2008

Posts: 197

Reputation: essential is an unknown quantity at this point

Rep Power: 1

Solved Threads: 28

essential

Online

Junior Poster

Re: add combobox dynamicaly

Aug 22nd, 2008

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

•

Join Date: Aug 2008

Posts: 197

Reputation: essential is an unknown quantity at this point

Rep Power: 1

Solved Threads: 28

essential

Online

Junior Poster

Re: add combobox dynamicaly

Aug 23rd, 2008

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

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<!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>
<!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>

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
<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>
<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>

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<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>
<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>

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
</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>
</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>