473,320 Members | 1,910 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Dynamic Drop down boxes with description

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
5 3010
RamananKalirajan
608 512MB
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
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
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
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
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

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

Similar topics

0
by: Leigh | last post by:
I am building a data entry application using Java servlets. I had hoped to use drop down boxes to provide the user with data entry selections pulled from a database, but am now questioning, given...
5
by: MasterChief | last post by:
I have 3 drop down boxes on the same page. Each one is being populated by a database. One is called Location, One is called Device and the other one is called Job Title. When the user selects...
7
by: callawayglfr | last post by:
I am building a database in access where I have a drop down box that relates to a text box, that part I have working but when someone selects information from the first drop down I need it to limit...
4
by: teknoshock | last post by:
I have created a page with multiple drop down boxes, all populated with the same options. My problem is, for 12 dropdown boxes and 40 choices per box, I end up with a massive file. Also, if I...
5
by: dynamitez | last post by:
Hi there, I need some help! I want to create 2 dependent dynamic drop down boxes which choices of box 2 depends on the choice chosen from box 1. Ex. Box1 -western -eastern Box2 (If...
31
by: DirtySnipe | last post by:
I have created a php form with dynamic drop down boxes in it which pull the options from a database. The boxes work fine and the data gets submitted fine but im having a problem getting the box to...
3
by: amcoldspy | last post by:
Hi, am trying to create dynamic drop down boxes.. there are 3 drop down boxes. The second drop down box elements are to be update based on the selection made in the first drop down box...
10
by: kashhere | last post by:
hi all, i had two drop down boxes on the selection of one item in the first drop down box the related items should be changed in the second one can any one please suggest me towards the solution...
3
by: happyman992 | last post by:
Hi, I have 2 questions. First, I am building a form with multiple drop down boxes. The options of the second drop down box will depend on what the user chooses on the first, options of the third...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.