Dynamic Drop-Downs to Dynamic Text Info

audreyality

I am new to javascript and appreciate any guidance on this issue, so thank you in advance for your advice!

Situation:
I am working with a form that will send information to a database. I need the following:

A drop-down box of options that onChange=...
Opens another drop-down box of unique options that onChange=...
Displays text dependent on which option you chose.

An example:
Choose a Foodgroup: [Drop-down list of options: Fruit, Veggies, Meat, Sweets]
Choose your Favorite: [Depends on which foodgroup]
[Multi-line description of your choice.]

I have found a lot of information about how to make one drop-down list depend on another, and information about how to display text based on a drop-down list. It seems like solutions for each involve arrays... I cannot seem to figure out have to combine the two needs.

Dormilich

Quote:

Originally Posted by audreyality

I have found a lot of information about how to make one drop-down list depend on another, and information about how to display text based on a drop-down list. It seems like solutions for each involve arrays... I cannot seem to figure out have to combine the two needs.

well, a drop-down list is so-to-speak an HTML representation of an array.

they are basicly built like

first <select> is hard coded (by whatever means)
depending on the amount of data you either request the next data array (if you have many options) via AJAX or us a hardcoded Array (less options)
build a new <select> from that array
repeat until the last <select>

as for the text display, simply fill an arbitrary (empty) element of your choice with the appropriate text node according to the last <select>’s value.

audreyality

So a "text node" would be something like this:
document.getElementById('text to be printed')? I am really new to this javascript thing, sorry!

I have an array for each department that associates a list of awards for to that department. I don't know how to associate a description of the award to each award, and that is where I am stuck.

Here is my code this far; I did find it from the URL commented:

Expand|Select|Wrap|Line Numbers

 
<!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>Honors and Awards Submission</title>

<script type="text/javascript">

//From http://www.alistapart.com/d/complexdynamiclists/dynamicselect.html

        function populate(o)

        {

            d=document.getElementById('Award');

            if(!d){return;}            

            var mitems=new Array();

            mitems['Blank']=[''];

            mitems['Anthropology']=['','Award A','Award B','Award C','Award D'];

            mitems['Art and Art History']=['','Best of Show','Coolest Car'];

            mitems['Biology']=['','Biggest Lab Rat','Safety Goggles of the Year','Lovliest in a Lab Coat','Award Z'];

            mitems['Classical Studies']=['','Best Thesis','Most Likely to Win on Jeopardy'];

            mitems['English']=['','Greatest Grammatical Genius','Perfect Poet','Lovliest Lines','Best at Using Big Words'];

            d.options.length=0;

            cur=mitems[o.options[o.selectedIndex].value];

            if(!cur){return;}

            d.options.length=cur.length;

            for(var i=0;i<cur.length;i++)

            {

                d.options[i].text=cur[i];

                d.options[i].value=cur[i];

            }

        }
 
    </script>

</head>
 
<body>

<div id="wrapper">

<form id="form" name="form" method="post" action="">

  <h1>Honors and Awards Submission Form</h1>

  <h3><strong>Attention:</strong> Only fill out one form per recipient. If multiple people will be receiving an award please fill out multiple award forms.</h3>
 
<h2>Choose the Award to File</h2>
 
<label for="Department">Department: <select onchange="populate(this); updateContent(this.value);" id="Department" name="Department">

            <option selected="select" value="Blank"></option>

            <option value="Anthropology">Anthropology</option>

            <option value="Art and Art History">Art and Art History</option>

            <option value="Biology">Biology</option>

            <option value="Classical Studies">Classical Studies</option>

            <option value="English">English</option>

            </select></label>   <br />

            <label for="Award">Award: 

            <select id="Award" name="Award" onchange="updateLikes(this.value);">

            <option selected="selected"></option>

            </select></label>
 
<br />
 
    <label>Award: <br />

       <div>This info needs to be dynamic depending on the award selected.</div>

    </label>

...

</body>

</html>

Dormilich

Quote:

Originally Posted by audreyality

So a "text node" would be something like this:
document.getElementById('text to be printed')?

Expand|Select|Wrap|Line Numbers

 // works even in IE

var TN = document.createTextNode("your text");

document.getElementById("whatever").appendChild(TN);

// or (if supported)

document.getElementById("whatever").textContent = "your text";

I’ll consider the rest tomorrow, as it’s too late today.

audreyality

Here is the solution my co-worker came up with, which works very well! I hope others find it useful too.

Expand|Select|Wrap|Line Numbers

 
<html>

<head>

  <script>

    var departments = {};

    var departmentSel;

    var awardSel;

    var descriptionDiv;
 
    function initForm()

    {

      // get a reference to our data table and remove it from the document

      var dataTable  = document.getElementById("dataTable");

      dataTable.parentNode.removeChild(dataTable);
 
      // get the elements we need to change and save them for later

      departmentSel  = document.getElementById("department");

      awardSel       = document.getElementById("award");

      descriptionDiv = document.getElementById("description");
 
      // get an array of rows from the table

      var rows = dataTable.getElementsByTagName('tr');
 
      for (var i=0; i<rows.length; i++)

      { 

        // get an array of columns from each row

        var col = rows[i].getElementsByTagName('td');        
 
        if (col.length && col.length > 2)

        {

          var d = col[0].textContent;

          var a = col[1].textContent;
 
          if (departments[d] == undefined)

          {

            departments[d] = {};

            departments[d].name = d;

            departments[d].awards = {};

          }

          departments[d].awards[a] = {};

          departments[d].awards[a].name = a;

          departments[d].awards[a].description = col[2].textContent;

        }

      }
 
      // add the the "department" options based on our array

      for (var d in departments)

      {

        departmentSel.options[departmentSel.length] = new Option(departments[d].name);

      }

    }
 
    function updateAwards(el)

    {

      var d = departmentSel.options[departmentSel.selectedIndex].text;
 
      // remove any existing award options after the first

      while (awardSel.options.length > 1) awardSel.remove(1);
 
      for (var a in departments[d].awards)

      {

        awardSel.options[awardSel.length] = new Option(departments[d].awards[a].name);

      }

    }

    function updateDescription()

    {

      var d = departmentSel.options[departmentSel.selectedIndex].text;

      var a = awardSel.options[awardSel.selectedIndex].text;
 
      descriptionDiv.innerHTML = departments[d].awards[a].description;

    }

  </script>

  <style>

    div.box { background: #e0e0e0; }

  </style>

</head>

<body onload="initForm()">

<form>

  <select id="department" name="Department" onChange="updateAwards()">

    <option value="">--Select a Department--</option>

  </select>
 
  <select id="award" name="Award" onChange="updateDescription()">

    <option value="">--Choose an Award--</option>

  </select>

  <div id="description" class="box">

  </div>

</form>

<table id="dataTable">

<tr><th>Department</th><th>Award</th><th>Description</th></tr>
 
<tr>

  <td>WITS</td>

  <td>Best use of Lasers Award</td>

  <td>Candidate must demonstrate something cool with lasers</td>

</tr>

<tr>

  <td>WITS</td>

  <td>Gimblepuddy G Horatio Award</td>
 
  <td>Candidate must possess all the requirements necessary to meet the requirements outlined in the criteria</td>

</tr>

<tr>

  <td>Biology</td>

  <td>Best use of Frogs</td>

  <td>Candidate must demonstrate something cool with frogs</td>

</tr>

</table>

</body>
 
</html>

Dynamic Drop-Downs to Dynamic Text Info

re: Dynamic Drop-Downs to Dynamic Text Info

re: Dynamic Drop-Downs to Dynamic Text Info

re: Dynamic Drop-Downs to Dynamic Text Info

re: Dynamic Drop-Downs to Dynamic Text Info

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about