By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,935 Members | 1,512 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,935 IT Pros & Developers. It's quick & easy.

Dynamic Drop down boxes with description

P: 3
Hello,

I just found this great forum and I'm really looking for some help! I've been trying to create a dynamic drop down select list script with descriptions. And I have been working on this script for three months already....but now I'm totally stuck!!

Lemme explain what I need first.

I have 19 products that each have it's own details: size, colors, materials and fnish. Therefore I need 5 select lists. The first one will list all of my 19 products. When one of those products is selected, the specific sizes for that product appear and people will need to select a size for that product to continue. Then, they'd have to select a specfic color for that product, then they have to select the material and finally...select the finish. None of the options are the same, so they all need to be dependable options. Also, some materials are only possible for only one or a few sizes, so I need to be able to specify that too.

So far, that's not my problem, I've got that fixed....but now...

I also need to be able to display one or a few lines of text as a description of the selected choices so far. Since these descriptions will also very per possible option, I need to be able to add in a description for every option in the whole script. I have no clue how to do this, I've tried endless things and so far... I can only code something that requires the visitor to click on a button to show the text. But the information need to be displayed automatically underneath every select list.

Also, for some of these information parts.... It's required to add in a table to display the information. And...at the end of all of the selection lists... I need to be able to add in a table (inside the information part, that's also why it needs to be possible to add in a table and not only text), which contains the prices for all of the products and the product details.

If possible, I'd like it that the next selection list will only appear once an option from the previous list has been chosen. If that's not possible.... I can live with that, lol. But I need to get this fixed and I'm getting really confused since I don't know how to do this anymore.

I have about 12 different scripts that display only a part of what I need, but if you need to have one of those scripts, I'd be happy to diplay them here.


Please, please help me out! I'm totally desperate!

Thank you very very much in advance for any tips!!
Jan 18 '10 #1
Share this Question
Share on Google+
5 Replies


RamananKalirajan
100+
P: 607
Hi bar2aYunie,
This is a way you can achieve your requirement
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <TITLE> New Document </TITLE>
  5. <META NAME="Generator" CONTENT="EditPlus">
  6. <META NAME="Author" CONTENT="Ramanan Kalirajan">
  7. <META NAME="Keywords" CONTENT="Demo">
  8. <META NAME="Description" CONTENT="Demo">
  9. <script type="text/javascript">
  10.     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");
  11.  
  12.     function doThis(ths)
  13.     {
  14.         var selInd = ths.selectedIndex;
  15.         //alert(selInd);
  16.         document.getElementById('msgDiv').innerHTML=descArray[selInd];
  17.     }
  18. </script>
  19. <style type="text/css">
  20. html, body
  21. {
  22.     height: 100%;
  23.     width: 100%;
  24.     margin: 0px;
  25.     width: 0px;
  26.     overflow: auto;
  27.     font-family: arial;
  28.     font-size: 11px;
  29. }
  30. body{
  31.     overflow: hidden;
  32. }
  33.  
  34. #msgDiv{
  35.     color: #00FF00;
  36.     height: 24px;
  37.     width: 100%;
  38.     float:left;
  39.     font-weight: bold;
  40.     text-align: center;
  41. }
  42.  
  43. </style>
  44. </HEAD>
  45. <BODY onmousedown="document.getElementById('msgDiv').innerHTML='';">
  46. <div id="msgDiv">
  47.     &nbsp;
  48. </div>
  49. <select id="selProduct" onchange="doThis(this)">
  50.     <option value="Product1">Product1</option>
  51.     <option value="Product2">Product2</option>
  52.     <option value="Product3">Product3</option>
  53.     <option value="Product4">Product4</option>
  54.     <option value="Product5">Product5</option>
  55.     <option value="Product6">Product6</option>
  56. </select>
  57. </BODY>
  58. </HTML>
  59.  
Thanks and Regards
Ramanan Kalirajan
Jan 19 '10 #2

P: 3
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?
Jan 19 '10 #3

P: 16
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.getElementById("mytext").innerHTML = "whatever your description is";

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


Expand|Select|Wrap|Line Numbers
  1.  
  2. <script language="JavaScript" type="text/javascript">
  3. <!--
  4. var count1 = 0;
  5. var count2 = 0;
  6.  
  7. function insertOptionBefore(num)
  8. {
  9.   var elSel = document.getElementById('selectX');
  10.   if (elSel.selectedIndex >= 0) {
  11.     var elOptNew = document.createElement('option');
  12.     elOptNew.text = 'Insert' + num;
  13.     elOptNew.value = 'insert' + num;
  14.     var elOptOld = elSel.options[elSel.selectedIndex];  
  15.     try {
  16.       elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE
  17.     }
  18.     catch(ex) {
  19.       elSel.add(elOptNew, elSel.selectedIndex); // IE only
  20.     }
  21.   }
  22. }
  23.  
  24. function removeOptionSelected()
  25. {
  26.   var elSel = document.getElementById('selectX');
  27.   var i;
  28.   for (i = elSel.length - 1; i>=0; i--) {
  29.     if (elSel.options[i].selected) {
  30.       elSel.remove(i);
  31.     }
  32.   }
  33. }
  34.  
  35. function appendOptionLast(num)
  36. {
  37.   var elOptNew = document.createElement('option');
  38.   elOptNew.text = 'Append' + num;
  39.   elOptNew.value = 'append' + num;
  40.   var elSel = document.getElementById('selectX');
  41.  
  42.   try {
  43.     elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
  44.   }
  45.   catch(ex) {
  46.     elSel.add(elOptNew); // IE only
  47.   }
  48. }
  49.  
  50. function removeOptionLast()
  51. {
  52.   var elSel = document.getElementById('selectX');
  53.   if (elSel.length > 0)
  54.   {
  55.     elSel.remove(elSel.length - 1);
  56.   }
  57. }
  58. </script>
  59. </head>
  60. <body>
  61.  
  62. <form>
  63. <input type="button" value="o" onclick="insertOptionBefore(count1++);" />
  64. Insert Before Selected<br />
  65. <input type="button" value="o" onclick="removeOptionSelected();" />
  66. Remove Selected<br />
  67. <select id="selectX" size="10" multiple="multiple">
  68. <option value="original1" selected="selected">Orig1</option>
  69. <option value="original2">Orig2</option>
  70. </select>
  71. <br />
  72. <input type="button" value="o" onclick="appendOptionLast(count2++);" />
  73. Append Last<br />
  74. <input type="button" value="o" onclick="removeOptionLast();" />
  75. Remove Last
  76. </form>
  77.  
  78.  
Jan 19 '10 #4

P: 3
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!
Jan 19 '10 #5

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

Expand|Select|Wrap|Line Numbers
  1. <script>
  2. openSel2() {
  3.    // get the select box
  4.    var option = document.getElementById('sel1');
  5.    // get selected item
  6.    var selected = option(option.selectedIndex);
  7.  
  8.    // put out description
  9.    if (selected == "orange") {
  10.        document.getElementById('div1').innerHTML = "Oranges are rich in vitamin C";
  11.    }   
  12.    if (selected == "apple") {
  13.        document.getElementById('div1').innerHTML = "An apple a day...";
  14.    }   
  15.  
  16.    // unhide the 2nd select box
  17.    document.getElementById('div2').style.display = "block";
  18. }
  19. <select id="sel1" onChange="openSel2()">
  20. <option value="orange">orange</option>
  21. <option value="apple">apple</option>
  22. <option value="banana">banana</option>
  23. </select>
  24. <div id=div1"></div>
  25. <select id="sel2">
  26. <option value="florida" style="display:hidden">florida</option>
  27. <option value="california">california</option>
  28. <option value="mexico">mexico</option>
  29. </select>
  30. <div id="div2"</div>
  31.  
  32.  
Jan 19 '10 #6

Post your reply

Sign in to post your reply or Sign up for a free account.