Dynamic Drop down boxes with description

**RamananKalirajan** · Jan 19 '10, 05:11 AM

Hi bar2aYunie,
This is a way you can achieve your requirement

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Ramanan Kalirajan">
<META NAME="Keywords" CONTENT="Demo">
<META NAME="Description" CONTENT="Demo">
<script type="text/javascript">
	var descArray = new Array("Description for 1st product","Description for 2nd Product","Description for 3rd Product","Description for 4th Product","Description for 5th Product","Description for 6th Product");

	function doThis(ths)
	{
		var selInd = ths.selectedIndex;
		//alert(selInd);
		document.getElementById('msgDiv').innerHTML=descArray[selInd];
	}
</script>
<style type="text/css">
html, body
{
	height: 100%;
	width: 100%;
	margin: 0px;
	width: 0px;
	overflow: auto;
	font-family: arial;
	font-size: 11px;
}
body{
	overflow: hidden;
}

#msgDiv{
	color: #00FF00;
	height: 24px;
	width: 100%;
	float:left;
	font-weight: bold;
	text-align: center;
}

</style>
</HEAD>
<BODY onmousedown="document.getElementById('msgDiv').innerHTML='';">
<div id="msgDiv">
	&nbsp;
</div>
<select id="selProduct" onchange="doThis(this)">
	<option value="Product1">Product1</option>
	<option value="Product2">Product2</option>
	<option value="Product3">Product3</option>
	<option value="Product4">Product4</option>
	<option value="Product5">Product5</option>
	<option value="Product6">Product6</option>
</select>
</BODY>
</HTML>

Thanks and Regards
Ramanan Kalirajan

**Bar2aYunie** · Jan 19 '10, 01:20 PM

Thank you for replying Ramanan Kalirajan, but that gives me only one drop down list with descriptions. I need a total of 5 drop down lists....After the product, people need to select the size they want, then the color, then the material and finally the finishes.

Do you know how to add in more select boxes with dependable options?

**harrierdh** · Jan 19 '10, 09:04 PM

Here is some code you can look at. It should give you the functionality you need. As far as populating a description, give your element an id. For instance if it's a

<div id="mytext"></div>

When you create the drop downs you can access this using.

document.getEle mentById("mytex t").innerHTM L = "whatever your description is";

Copy and paste this then try it out and play with the code.

Code:

<script language="JavaScript" type="text/javascript">
<!--
var count1 = 0;
var count2 = 0;

function insertOptionBefore(num)
{
  var elSel = document.getElementById('selectX');
  if (elSel.selectedIndex >= 0) {
    var elOptNew = document.createElement('option');
    elOptNew.text = 'Insert' + num;
    elOptNew.value = 'insert' + num;
    var elOptOld = elSel.options[elSel.selectedIndex];  
    try {
      elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE
    }
    catch(ex) {
      elSel.add(elOptNew, elSel.selectedIndex); // IE only
    }
  }
}

function removeOptionSelected()
{
  var elSel = document.getElementById('selectX');
  var i;
  for (i = elSel.length - 1; i>=0; i--) {
    if (elSel.options[i].selected) {
      elSel.remove(i);
    }
  }
}

function appendOptionLast(num)
{
  var elOptNew = document.createElement('option');
  elOptNew.text = 'Append' + num;
  elOptNew.value = 'append' + num;
  var elSel = document.getElementById('selectX');

  try {
    elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
  }
  catch(ex) {
    elSel.add(elOptNew); // IE only
  }
}

function removeOptionLast()
{
  var elSel = document.getElementById('selectX');
  if (elSel.length > 0)
  {
    elSel.remove(elSel.length - 1);
  }
}
</script>
</head>
<body>

<form>
<input type="button" value="o" onclick="insertOptionBefore(count1++);" />
Insert Before Selected<br />
<input type="button" value="o" onclick="removeOptionSelected();" />
Remove Selected<br />
<select id="selectX" size="10" multiple="multiple">
<option value="original1" selected="selected">Orig1</option>
<option value="original2">Orig2</option>
</select>
<br />
<input type="button" value="o" onclick="appendOptionLast(count2++);" />
Append Last<br />
<input type="button" value="o" onclick="removeOptionLast();" />
Remove Last
</form>

**Bar2aYunie** · Jan 19 '10, 09:39 PM

Thx, but where do I put in the options? And will that text be displayed when you select one of the options|?

Cos that text needs to be displayed per option.

Lemme give an example:

Options 1:
- Fruit
- Vegtables
- Other

When selecting Fruit, text appears eg 'You have now selected Fruit, please select the sort'.

When selecting Vegtables, text appears eg 'You have now selected Vegtables, please select the sort'.

When selecting Other, text appears eg 'You have now selected Other, please select one of the options below.

As you can see, the options in the second box vary, depending on the previous option chosen. Also, the text varies, depending on the chosen option.

As I read the script, I cannot find that... or am I missing something?

Thx for helping out!

**harrierdh** · Jan 19 '10, 10:59 PM

This is un-tested but you should get the idea. I think this is what your looking for. ??

Code:

<script>
openSel2() {
   // get the select box
   var option = document.getElementById('sel1');
   // get selected item
   var selected = option(option.selectedIndex);

   // put out description
   if (selected == "orange") {
       document.getElementById('div1').innerHTML = "Oranges are rich in vitamin C";
   }   
   if (selected == "apple") {
       document.getElementById('div1').innerHTML = "An apple a day...";
   }   

   // unhide the 2nd select box
   document.getElementById('div2').style.display = "block";
}
<select id="sel1" onChange="openSel2()">
<option value="orange">orange</option>
<option value="apple">apple</option>
<option value="banana">banana</option>
</select>
<div id=div1"></div>
<select id="sel2">
<option value="florida" style="display:hidden">florida</option>
<option value="california">california</option>
<option value="mexico">mexico</option>
</select>
<div id="div2"</div>

Dynamic Drop down boxes with description

Dynamic Drop down boxes with description

Comment

Comment

Comment

Comment

Comment