Need description for script

[Bar2aYunie]

I've got a script with combo boxes/ select lists. Where people can select various options through select lists. But this script needs to have a description.

Lemme post the script I have first and explain after:

<script type="text/javascript">
/* <![CDATA[ */
// For: http://www.webdeveloper.com/forum/showthread.php?p=1058250&posted=1#post1058250

var Products = [
    '-- Select --',    
    'Product 1',    
    'Product 2',    
    'Product 3',    
];

var Product1Size = [
    '-- Select --',    
	"Option 1",
	"Option 2",
	"Option 3",
];	
var Product1Color = [
    '-- Select --',    
	"Option 1",
	"Option 2",
	"Option 3",
];

var Product1Material = [
    '-- Select --',    
	"Option 1",
	"Option 2",
	"Option 3",
];

var Product1Finish = [
    '-- Select --',    
	"Option 1",
	"Option 2",
	"Option 3",
];

var Product2Size = [
    '-- Select --',    
	"Option 1",
	"Option 2",
	"Option 3",
];
var Product2Color = [
    '-- Select --',    
	"Option 1",
	"Option 2",
	"Option 3",
];

var Product2Material = [
    '-- Select --',    
	"Option 1",
	"Option 2",
	"Option 3",
];

var Product2Finish = [
    '-- Select --',    
	"Option 1",
	"Option 2",
	"Option 3",
];

var Product3Size = [
    '-- Select --',    
	"Option 1",
	"Option 2",
	"Option 3",
];

var Product3Color = [
    '-- Select --',    
	"Option 1",
	"Option 2",
	"Option 3",
];

var Product3Material = [
    '-- Select --',    
	"Option 1",
	"Option 2",
	"Option 3",
];

var Product3Finish = [
    '-- Select --',    
	"Option 1",
	"Option 2",
	"Option 3",
];

function toggle(IDS) {										//alert(IDS);
  var sel = document.getElementById('combo_0');
															//var str = '';
  for (var i=0; i<sel.options.length; i++) {
    document.getElementById('p'+i).style.display = 'none';	//str += i+' ';
  }
															//alert(str+' of '+sel.options.length);
  sel = document.getElementById(IDS);
  sel.style.display = (sel.style.display != 'block') ? 'block' : 'none';
}

function changeProduct(info) { toggle('p'+info.value); }

function MakeOptions(Arr) {
    var str = '';
    for (var i=0; i<Arr.length; i++) { str += '<option value="'+i+'">'+Arr[i]+'</option>'; }
//    for (var i=0; i<Arr.length; i++) { str += '<option value="'+Arr[i]+'">'+Arr[i]+'</option>'; }
    document.write(str);
}

var SelectionResults = '';
function Validate() {
  SelectionResults = '';
  var str = '';
  var stmp = [];
  var tarr = [];
  for (var i=1; i<Products.length; i++) {			
	tarr = document.getElementById('p'+i).getElementsByTagName('select');
	stmp = [];															
    for (var j=0; j<tarr.length; j++) {
	   if (tarr[j].selectedIndex > 0) { stmp.push(tarr[j].value); }   
    }	
    if ((stmp.length-1) != -1) {
	  str += '\n'+Products[i]+"_"+stmp.join('_'); 
      if ((stmp.length) != (tarr.length)) {
	    alert('Incomplete selections for product: '+Products[i]); return false;
	  } 
    }
  }
  if (str != '') { SelectionResults = str; return true; } else { return false; }
}

/* ]]> */
</script>

<style type="text/css">
h2 { text-align:center; color:red; }
h3 { text-align:center; color:green; }
.product {
  display:none;
  width:698px;
}
.divWidth {
  width:165px;
  margin:1em .5em;
  text-align:left;
  float:left;
}
.selectWidth {
  width:505px;
  margin:1em .5em;
  float:left;
}
.clear {
  clear:both;
}

</style>


<form name="products" action="javascript:alert(SelectionResults)" onsubmit="return Validate()">

 <div id="leftSide" style="float:left;width:300px">
  Select a Product: 
  <select name="combo0" id="combo_0" onChange="changeProduct(this)">
    <script type="text/javascript">
/* <![CDATA[ */    MakeOptions(Products); /* ]]> */
    </script>
  </select>
  <p><input type="submit" value="Submit">
 </div>
 
 <div id="rightSide" style="float:left;width:700px;height:400px;">
  <div id="p0"  class="product"><h2>Description of Product Range</h2></div>
  
  <div id="p1"  class="product"><h2>Product1</h2>
    <div class="divWidth">Select a Size: </div>
    <select class="selectWidth">
    <script type="text/javascript">
/* <![CDATA[ */     MakeOptions(Product1Size); /* ]]> */
    </script></select></p>
    <p class="clear"><div class="divWidth">Select a Color: </div>
    <select class="selectWidth">
    <script type="text/javascript">
/* <![CDATA[ */    MakeOptions(Product1Color); /* ]]> */
    </script></select></p>
    <p class="clear"><div class="divWidth">Select a Material: </div>
    <select class="selectWidth">
    <script type="text/javascript">
/* <![CDATA[ */    MakeOptions(Product1Material); /* ]]> */
    </script></select></p>
    <p class="clear"><div class="divWidth">Select a Finish: </div>
    <select class="selectWidth">
    <script type="text/javascript">
/* <![CDATA[ */    MakeOptions(Product1Finish); /* ]]> */
    </script></select></p>
    <center><button onclick="SelectionInformation()">
     <h3>Additional information concerning current selections</h3>
     </button></center><p>
    <p class="clear">&nbsp;</p>
    <h3>Information concerning Style, Size, Weight and Finish of Product</h3>
    More information that I don't know anything about!
  </div>

  
  <div id="p2"  class="product"><h2>Product2</h2>
    <div class="divWidth">Select a Size: </div> 
    <select class="selectWidth">
    <script type="text/javascript">
/* <![CDATA[ */     MakeOptions(Product2Size); /* ]]> */
    </script></select></p>
    <p class="clear"><div class="divWidth">Select a Color: </div>
    <select class="selectWidth">
    <script type="text/javascript">
/* <![CDATA[ */    MakeOptions(Product2Color); /* ]]> */
    </script></select></p>
    <p class="clear"><div class="divWidth">Select a Material: </div>
    <select class="selectWidth">
    <script type="text/javascript">
/* <![CDATA[ */    MakeOptions(Product2Material); /* ]]> */
    </script></select></p>
    <p class="clear"><div class="divWidth">Select a Finish: </div>
    <select class="selectWidth">
    <script type="text/javascript">
/* <![CDATA[ */    MakeOptions(Product2Finish); /* ]]> */
    </script></select></p>
    <p class="clear">&nbsp;</p>
    <h3>Information concerning Style, Size, Weight and Finish of Product</h3>
    More information that I don't know anything about!
  </div>

  
  <div id="p3"  class="product"><h2>Product3</h2>
    <div class="divWidth">Select a Size: </div>
    <select class="selectWidth">
    <script type="text/javascript">
/* <![CDATA[ */    MakeOptions(Product3Size); /* ]]> */
    </script></select></p>
    <p class="clear"><div class="divWidth">Select a Color: </div>
    <select class="selectWidth">
    <script type="text/javascript">
/* <![CDATA[ */    MakeOptions(Product3Color); /* ]]> */
    </script></select></p>
    <p class="clear"><div class="divWidth">Select a Material: </div>
    <select class="selectWidth">
    <script type="text/javascript">
/* <![CDATA[ */    MakeOptions(Product3Material); /* ]]> */
    </script></select></p>
    <p class="clear"><div class="divWidth">Select a Finish: </div>
    <select class="selectWidth">
    <script type="text/javascript">
/* <![CDATA[ */    MakeOptions(Product3Finish); /* ]]> */
    </script></select></p>
    <p class="clear">&nbsp;</p>
    <h3>Information concerning Style, Size, Weight and Finish of Product</h3>
    More information that I don't know anything about!
  </div>
  
 </div>
 <br style="clear:both">
</form>

But I need to have a description area here. Meaning that I want to to make it happen that whenever somebody selects one of these links, a few lines of text appear underneath the selection box where the selection has been made.

Can somebody please help me out? Thank you!