...

View Full Version : Confusion over OptGroup



DanielHowden
12-30-2010, 02:57 PM
This is some code that I found that does what I need to do. However in this code I need to create a new var for each item. I have a lot of item in my list that I want to add to the drop down. Is there a simpler way to do this in JS?

Cheers Daniel.


<HTML>
<HEAD>
<TITLE></TITLE>
<META NAME="GENERATOR" Content="Microsoft Visual Studio">
<META HTTP-EQUIV="Content-Type" content="text/html; charset=UTF-8">
</HEAD>
<BODY>&nbsp;

<input type="button" value="Show me the menu!"
onclick="populateSelect();" ID=Button1/>

<input type="button" value="Clear it"
onclick="var f = document.getElementById('foodOptions');
while (f.hasChildNodes()) { f.removeChild(f.firstChild); }" ID=Button2/>

<script>
function populateSelect() {

// create optgroups
var breakfast = document.createElement("optgroup");
breakfast.label = "Breakfast";
var lunch = document.createElement("optgroup");
lunch.label = "Lunch";
var dinner = document.createElement("optgroup");
dinner.label = "Dinner";

// create options and attach to optgroups
var cereal = document.createElement("option");
cereal.value = "cereal";
cereal.appendChild(document.createTextNode("Cereal"));
breakfast.appendChild(cereal);

var eggs = document.createElement("option");
eggs.value = "eggs";
eggs.appendChild(document.createTextNode("Eggs"));
breakfast.appendChild(eggs);

var toast = document.createElement("option");
toast.value = "toast";
toast.appendChild(document.createTextNode("Toast"));
breakfast.appendChild(toast);

var sandwich = document.createElement("option");
sandwich.value = "sandwich";
sandwich.appendChild(document.createTextNode("Sandwich"));
lunch.appendChild(sandwich);

var soup = document.createElement("option");
soup.value = "soup";
soup.appendChild(document.createTextNode("Soup"));
lunch.appendChild(soup);

var meat = document.createElement("option");
meat.value = "meat";
meat.appendChild(document.createTextNode("Meat"));
dinner.appendChild(meat);

var potatoes = document.createElement("option");
potatoes.value = "potatoes";
potatoes.appendChild(document.createTextNode("Potatoes"));
dinner.appendChild(potatoes);

var vegetables = document.createElement("option");
vegetables.value = "vegetables";
vegetables.appendChild(document.createTextNode("Vegetables"));
dinner.appendChild(vegetables);

// set "eggs" as the default
eggs.selected = true;

// clear select menu and append optgroups
var selectMenu = document.getElementById("foodOptions");
while (selectMenu.hasChildNodes()) {
selectMenu.removeChild(selectMenu.firstChild);
}
if (breakfast.hasChildNodes()) { selectMenu.appendChild(breakfast); }
if (lunch.hasChildNodes()) { selectMenu.appendChild(lunch); }
if (dinner.hasChildNodes()) { selectMenu.appendChild(dinner); }
}
</script>
<select id=foodOptions></select>
</BODY>
</HTML>

Dormilich
12-30-2010, 05:02 PM
you can use functions to make it easier.

function makeOption(desc, val)
{
var opt = document.createElement("option");
opt.value = val;
opt.appendChild(document.createTextNode(desc));
// opt.innerHTML = desc;
return opt;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum