Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    50
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Confusion over OptGroup

    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.

    Code:
    <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>

  • #2
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,474
    Thanks
    13
    Thanked 361 Times in 357 Posts
    you can use functions to make it easier.
    PHP Code:
    function makeOption(descval)
    {
        var 
    opt   document.createElement("option");
        
    opt.value val;
        
    opt.appendChild(document.createTextNode(desc));
    //  opt.innerHTML = desc;
        
    return opt;

    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •