double drop down lists

@penguinoMar 01.2012

Hi I need to build a page that presents two dropdown lists:
The first one is for items and the second is for colours.

For example if the chosen item is porche, than the colours list will be filled with different colours that are available for each item.

After the two selections are made, a picture will be shown contains the product and below it, a specific link to for the item’s page.

I hope this is not too much to ask and you have seen some code that can be modified or do the same things, I have turned the web upside down and could not find the answer.

Appreciate your help.

to post a comment

JavaScript

4 Comments(s) _↴

@JMRKERMar 02.2012 — #You can search this forum and find the answer several times.

But, it would be nice to see what you might have tried to this point.

Specifically, where are the images you wish to display and the associated links.

@penguinoauthorMar 02.2012 — #This code shows three dropdown lists that generates a link at the end and a picture.

But it is not good for me as the choices can't be repeated to generate different links.. At the third drop down I would like to use always the same words but still get different results, rely on the first and second boxes as well.

For example: choiseA: Cars, choiseB: Brands, choiseC: Colours.

[CODE]<!-- The first select list -->
 Select Option: <select name="slist1" onchange="SList.getSelect('slist2', this.value);">
 <option>- - -</option>
 <option value="s1_opt1">S1 Option1</option>
 <option value="s1_opt2">S1 Option2</option>
 </select>
 <!-- Tags for the other 2 dropdown list, and for text-content -->
 <span id="slist2"></span> <span id="slist3"></span> <div id="scontent"></div>
 
 <script><!--
 /* Script Triple Select Dropdown List, from: www.coursesweb.net/javascript/ */
 var SList = new Object();             // JS object that stores data for options
 
 // HERE replace the values with the text you want to be displayed near Select
 var txtsl2 = 'Select Option:';         // text for the seccond dropdown list
 var txtsl3 = 'Select Option:';         // text for the third dropdown list
 
 /*
 Property with options for the Seccond select list
 The key in this object must be the same with the values of the options added in the first select
 The values in the array associated to each key represent options of the seccond select
 */
 SList.slist2 = {
 "s1_opt1": ['s1o1_opt1', 's1o1_opt2'],
 "s1_opt2": ['s1o2_opt1', 's1o2_opt2'],
 };
 
 /*
 Property with options for the Third select list
 The key in this object must be the same with the values (options) added in each Array in "slist2" above
 The values in the array associated to each key represent options of the third select
 */
 SList.slist3 = {
 "s1o1_opt1": ['s2o1_1_opt1', 's2o1_1_opt2'],
 "s1o1_opt2": ['s2o1_2_opt1', 's2o1_2_opt2'],
 "s1o2_opt1": ['s2o2_1_opt1', 's2o2_1_opt2'],
 "s1o2_opt2": ['s2o2_2_opt1', 's2o2_2_opt2'],
 };
 
 /*
 Property with content associated to the options of the third select list
 The key in this object must be the same with the values (options) added in each Array in "slist3" above
 The values of each key represent the content displayed after the user selects an option in 3rd dropdown list
 */
 SList.scontent = {
 "s2o1_1_opt1": '<a href="a.htm">a link</a> <img src="img.jpg"</src>',
 "s2o1_1_opt2": '<a href="b.htm">b link</a> <img src="img.jpg"</src>',
 "s2o1_2_opt1": '<a href="c.htm">c link</a> <img src="img.jpg"</src>',
 "s2o1_2_opt2": 'Content for s2o1_2_opt2',
 "s2o2_1_opt1": 'Content for s2o2_1_opt1',
 "s2o2_1_opt2": 'Content for s2o2_1_opt2',
 "s2o2_2_opt1": 'Content for s2o2_2_opt1',
 "s2o2_2_opt2": 'Content for s2o2_2_opt2',
 };
 
  /* From here no need to modify */
 
 // function to get the dropdown list, or content
 SList.getSelect = function(slist, option) {
 document.getElementById('scontent').innerHTML = '';           // empty option-content
 
 if(SList[slist][option]) {
 // if option from the last Select, add text-content, else, set dropdown list
 if(slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
 else {
 var addata = '<option>- - -</option>';
 for(var i=0; i<SList[slist][option].length; i++) {
 addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
 }
 
   // cases for each dropdown list
   switch(slist) {
   case 'slist2':
   document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect('slist3', this.value);">'+addata+'</select>';
   document.getElementById('slist3').innerHTML = '';
   break;
   case 'slist3':
   document.getElementById('slist3').innerHTML = txtsl3+' <select name="slist3" onchange="SList.getSelect('scontent', this.value);">'+addata
 
 +'</select>';
 break;
 }
 }
 }
 else {
 // empty the tags for select lists
 if(slist == 'slist2') {
 document.getElementById('slist2').innerHTML = '';
 document.getElementById('slist3').innerHTML = '';
 }
 else if(slist == 'slist3') {
 document.getElementById('slist3').innerHTML = '';
 }
 }
 }
 --></script>[/CODE]

Thanks

@WyCnetMar 03.2012 — #At [URL]http://www.wyc3.com/indexTEST.php[/URL]

you can find an example of 2-3 indexed lists from a live database.

Use [COLOR=darkred]GUEST logon[/COLOR].

If you save notes they are encrypted, but any guest can read them.

Multiple Guests can be logged in.

@JMRKERMar 05.2012 — #See if you can modify this to your needs...?

<i>
 </i>
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Dynamic Drop Down Selections&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 var Blank = [''];
 var Groups = new Array ('g1:Porsche','g2:Cheverolet','g3:Ford','g4:Chrysler');
 
 var g1 = new Array(':Red',':Black');
 var g2 = new Array(':White',':Silver',':Black');  <br/>
 var g3 = new Array(':Forest Green',':White',':Blue',':Red');
 var g4 = new Array(':Silver',':Red',':White',':Blue');
 
 function ListSetUp(level) {
 switch (level) {
 case 'Groups' : Populate('LSBox0',Groups);   Populate('LSBox1', Blank); break;
 case 'g1': Populate('LSBox1', g1); break;
 case 'g2': Populate('LSBox1', g2); break;
 case 'g3': Populate('LSBox1', g3); break;
 case 'g4': Populate('LSBox1', g4); break;
 default : alert('Invalid entry: '+level); break;  // should never ooccur
 }
 }
 
 function Populate(IDS,Items){
 var tmp = [];
 var sel = document.getElementById(IDS);
 sel.options.length=0;
 sel.options[0]=new Option('[SELECT]','',true,true);
 for (var i=0;i&lt;Items.length;i++){
 if (Items[i]){
 tmp = Items[i].split(':');
 sel.options[sel.options.length]=new Option(tmp[1],tmp[0],true,true);
 }
 }
 sel.selectedIndex=0;
 }
 
 function ShowCurrentSelections() {  // for testing purposes only
 var str = '';  var cmmt = '';
 var el = document.myForm.LSBox0; 
 if (el.selectedIndex != -1) { str += el.selectedIndex; }
 if (el.selectedIndex != -1) { cmmt += el.options[el.selectedIndex].text + ' : '; }
 el = document.myForm.LSBox1;
 if (el.selectedIndex != -1) { str += el.selectedIndex; }
 if (el.selectedIndex != -1) { cmmt += el.options[el.selectedIndex].text; }  // last value has no value
 
 //  alert(str);
 var baseURL = 'http:/www.nova.edu/hpd/otm/pics/4fun/';
 document.getElementById('imgMain').src = baseURL + str+'.jpg';
 document.getElementById('imgCmmt').innerHTML = cmmt;
 }
 
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body onload="ListSetUp('Groups')"&gt;
 
 &lt;form name="myForm" onsubmit="return false"&gt;
 &lt;fieldset style="width:250px;float:left"&gt;
 
 &lt;select id="LSBox0" onchange="ListSetUp(this.value)"&gt;&lt;/select&gt;
 
 &lt;select id="LSBox1" onchange="ShowCurrentSelections()"&gt;&lt;/select&gt;
 
 &lt;/fieldset&gt;
 &lt;div style="clear:both"&gt;
 &lt;!-- button onclick="ShowCurrentSelections()"&gt;Current Selections&lt;/button --&gt;
 &lt;/div&gt;
 &lt;div style="width:200px;height:300px"&gt;
 &lt;img id="imgMain" src="" alt=""&gt;
 &lt;div id="imgCmmt"&gt;&lt;/div&gt;
 &lt;/div&gt;
 &lt;/form&gt;
 &lt;/body&gt;
 &lt;/html&gt;

Also in #JavaScript _↴

help me Frame navigation to return [RESOLVED] Obtaining value of clicked item in unordered list

Success!

Help @penguino spread the word by sharing this article on Twitter...

Tweet This

double drop down lists

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

double drop down lists

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴