PDA

View Full Version : Populating Listbox



avizhome
Mar 31st, 2010, 06:03 AM
Hi,
Iam trying a simple fill listbox on the body load, but its not working. Can someone please help me on this :(


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script language="javascript" src="script.js"></script>
<body onload="fillCategory();">
<form id="drop_list" name="form1" method="post" action="">
<label>
<select name="Category" id="Category">
</select>
</label>
</form>
</body>
</html>


and my script.js:


function fillCategory(){
addOption(document.form1.Category, "Fiji", "Fiji", "");
addOption(document.form1.Category, "Australia", "Australia", "");
addOption(document.form1.Category, "New Zealand", "New Zealand", "");
}

Old Pedant
Mar 31st, 2010, 06:27 AM
So where is your code for the addOption() function??

I'm guessing you didn't realize that addOption() isn't something built-in.

I'd do it thus:

var countries = ["Figi","Australia","New Zealand"];
var continents = ["Africa","Antarctica","Asia","Australia","Europe","North America","South America"];

function fillCategory(list)
{
var sel = document.form1.Cateagory;
for ( var i = 0; i < list.length; ++i )
{
sel.options[i] = new Option( list[i], list[i] );
}
}

and then:

<body onload="fillCategory(countries);">


The point being, of course, that you could fill with a different list just by passing a reference to it to the function.

avizhome
Mar 31st, 2010, 06:40 AM
sorry :) my addOption() function is:


function addOption(selectbox, value, text )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;

selectbox.options.add(optn);
}

Am trying to fill my first listbox with those values then then on it onchange event is will populate another listbox. For instance i have a list of countries on the first listbox and state on the other, and the second list box will populate itself according to what was selected in the 1st

Philip M
Mar 31st, 2010, 08:10 AM
Am trying to fill my first listbox with those values then then on it onchange event is will populate another listbox. For instance i have a list of countries on the first listbox and state on the other, and the second list box will populate itself according to what was selected in the 1st

Try this:-


<html>
<head>
<script type = "text/javascript">

function setOptions(opt) {
var select2 = document.myform.select2;
select2.options.length = 0;

if (opt == "0"){
select2.options[select2.options.length] = new Option('');
}

if (opt == "1") {
select2.options[select2.options.length] = new Option('Select A State');
select2.options[select2.options.length] = new Option('New York');
select2.options[select2.options.length] = new Option('California');
select2.options[select2.options.length] = new Option('Texas');
select2.options[select2.options.length] = new Option('Arizona');
// and so on
}
if (opt == "2") {
select2.options[select2.options.length] = new Option('Select A State');
select2.options[select2.options.length] = new Option('Nova Scotia');
select2.options[select2.options.length] = new Option('Ontario');
select2.options[select2.options.length] = new Option('Alberta');
select2.options[select2.options.length] = new Option('British Colombia');
// and so on
}
if (opt == "3") {
select2.options[select2.options.length] = new Option('Select A State');
select2.options[select2.options.length] = new Option('New South Wales');
select2.options[select2.options.length] = new Option('Queensland');
select2.options[select2.options.length] = new Option('Victoria');
select2.options[select2.options.length] = new Option('Western Australia');
// and so on
}
}
</script>
</head>
<body>

<form name="myform">
<select name="select1" size="1" style="width: 150px" onchange="setOptions(document.myform.select1.options[document.myform.select1.selectedIndex].value);">
<option value="0" selected>Select A Country</option>
<option value="1">USA</option>
<option value="2">Canada</option>
<option value="3">Australia</option>
</select>
<br />
<br />
<select name="select2" size="1" style="width: 150px" >
<option value = "0"></option>
</select>

</form>

</body>
</html>


There is no real point in populating the inital select lists dynamically, i.e. with
<body onload="fillCategory(countries);">


Quizmaster: On what part of the body is a lobotomy performed?
Contestant: The bottom.