#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    9
    Rep Power
    0

    Beginner needs help calling both value and text from multidimensional array


    HTML:
    Code:
     <select ID="colorselect" onchange=SetClasps()>
    	<option value="bronzenappa6mm">6mm Nappa Braided Bracelet - Bronze</option>
    	<option value="chocolatenappa6mm">6mm Nappa Braided Bracelet - Chocolate</option>
    	<option value="coppernappa6mm">6mm Nappa Braided Bracelet - Copper</option>
    	<option value="gunmetalnappa6mm">6mm Nappa Braided Bracelet - Gunmetal</option>
    	<option value="pearlnappa6mm">6mm Nappa Braided Bracelet - Pearl</option>
    	<option value="blackbololeather6mm">6mm Bolo Leather Bracelet - Black</option>
    	<option value="blackbrownleather6mm">6mm Bolo Leather Bracelet - Black & Brown</option>
    	<option value="blackdoublew7mm">7mm Double Wrap Leather Bolo W/ Metal Rings - Black</option>
    	<option value="blackdoublewo7mm">7mm Double Wrap Leather Bolo W/O Metal Rings - Black</option>
    	<option value="blackbololeather8mm">8mm Bolo Leather Bracelet - Black</option>
    	<option value="dbrownbololeather8mm">8mm Bolo Leather Bracelet - Dark Brown</option>
    </select>
    </br>
    <p>Clasp Type:</p>
    <select ID="claspselect">
    </select>
    JavaScript:
    Code:
    <script type="text/javascript>
    	function SetClasps()
    	{
    	var Clasps=new Array;
    	Clasps["bronzenappa6mm"][0]={value:"ssl", text:"Stainless Steel Locking"};
    	Clasps["bronzenappa6mm"][1]={value:"ssm", text:"Stainless Steel Magnetic"};
    	Clasps["chocolatenappa6mm"][0]={value:"ssl", text:"Stainless Steel Locking"};
    	Clasps["chocolatenappa6mm"][1]={value:"ssm", text:"Stainless Steel Magnetic"};
    	Clasps["coppernappa6mm"][0]={value:"ssl", text:"Stainless Steel Locking"};
    	Clasps["coppernappa6mm"][1]={value:"ssm", text:"Stainless Steel Magnetic"};
    	Clasps["gunmetalnappa6mm"][0]={value:"ssb", text:"Stainless Steel Bullet"};
    	Clasps["gunmetalnappa6mm"][1]={value:"ssm", text:"Stainless Steel Magnetic"};
    	Clasps["pearlnappa6mm"][0]={value:"ssl", text:"Stainless Steel Locking"};
    	Clasps["pearlnappa6mm"][1]={value:"ssm", text:"Stainless Steel Magnetic"};
    	Clasps["blackbololeather6mm"][0]={value:"ssl", text:"Stainless Steel Locking"};
    	Clasps["blackbololeather6mm"][1]={value:"ssm", text:"Stainless Steel Magnetic"};
    	Clasps["blackbrownleather6mm"][0]={value:"ssl", text:"Stainless Steel Locking"};
    	Clasps["blackbrownleather6mm"][1]={value:"ssm", text:"Stainless Steel Magnetic"};
    	Clasps["blackdoublew7mm"][0]={value:"ssb", text:"Stainless Steel Bullet"};
    	Clasps["blackdoublew7mm"][1]={value:"ssm", text:"Stainless Steel Magnetic"};
    	Clasps["blackdoublewo7mm"][0]={value:"ssb", text:"Stainless Steel Bullet"};
    	Clasps["blackdoublewo7mm"][1]={value:"ssm", text:"Stainless Steel Magnetic"};
    	Clasps["blackbololeather8mm"][0]={value:"ssl", text:"Stainless Steel Locking"};
    	Clasps["blackbololeather8mm"][1]={value:"ssm", text:"Stainless Steel Magnetic"};
    	Clasps["dbrownbololeather8mm"][0]={value:"ssl", text:"Stainless Steel Locking"};
    	Clasps["dbrownbololeather8mm"][1]={value:"ssm", text:"Stainless Steel Magnetic"};
    
            var colorsel = document.getElementById('colorselect');
            var claspsel = document.getElementById('claspselect');
    	claspsel.length = 0;
    	var _val = colorsel.options[colorsel.selectedIndex].value;
                
    		for (i = 0; i < Clasps[_val].length; i++)
    		{
                    var op = document.createElement('option');
                    op.value = clasps[_val][i];
                    op.text = clasps[_val][i];
                    claspSel.appendChild(op);
    		}
    	}
    </script>

    This is the code I've got so far, I'm new to javascript and web developement in general. Explanations of any mistakes I'm making would be much appreciated. I just can't seem to get this to work. I'm trying to have the claspselect select box populated based on an array of information and the selection in the colorselect box.
    Thank you very much for any help you can give me.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,187
    Rep Power
    184
    If you restructure your object/array, you could do something like this (Note: I only set-up two keys in your object/array..., for demo purposes; you will have to set-up the rest):
    Code:
    <script type="text/javascript">
    	function SetClasps()
    	{
    	var Clasps = new Array();
    	
    	Clasps[0] = { bronzenappa6mm : [
                           {value:"ssl",text:"Stainless Steel Locking"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    
    	Clasps[1] = { chocolatenappa6mmm : [
                           {value:"ssl2",text:"Stainless Steel Locking 2"}, 
                           {value:"ssm2",text:"Stainless Steel Magnetic 2"}
                          ]
                        };
    	
            var colorsel = document.getElementById('colorselect');
            var claspsel = document.getElementById('claspselect');
    	var _val = colorsel.options[colorsel.selectedIndex].value;
    	claspsel.innerHTML="";
    
    		for (i = 0; i < Clasps.length; i++){
    
                     var op = document.createElement('option');
                     switch(_val){
                      case "bronzenappa6mm":
                       op.innerHTML = Clasps[colorsel.selectedIndex].bronzenappa6mm[i].text;
                       op.value = Clasps[colorsel.selectedIndex].bronzenappa6mm[i].value;
                       break;
                      case "chocolatenappa6mm":
                       op.innerHTML = Clasps[colorsel.selectedIndex].chocolatenappa6mmm[i].text;
                       op.value = Clasps[colorsel.selectedIndex].chocolatenappa6mmm[i].value;
                       break;
                     }
    
                     claspsel.appendChild(op);
    
    		}
    	}
    </script>
    
    <select ID="colorselect" onchange=SetClasps()>
    	<option value="bronzenappa6mm">6mm Nappa Braided Bracelet - Bronze</option>
    	<option value="chocolatenappa6mm">6mm Nappa Braided Bracelet - Chocolate</option>
    	<option value="coppernappa6mm">6mm Nappa Braided Bracelet - Copper</option>
    	<option value="gunmetalnappa6mm">6mm Nappa Braided Bracelet - Gunmetal</option>
    	<option value="pearlnappa6mm">6mm Nappa Braided Bracelet - Pearl</option>
    	<option value="blackbololeather6mm">6mm Bolo Leather Bracelet - Black</option>
    	<option value="blackbrownleather6mm">6mm Bolo Leather Bracelet - Black & Brown</option>
    	<option value="blackdoublew7mm">7mm Double Wrap Leather Bolo W/ Metal Rings - Black</option>
    	<option value="blackdoublewo7mm">7mm Double Wrap Leather Bolo W/O Metal Rings - Black</option>
    	<option value="blackbololeather8mm">8mm Bolo Leather Bracelet - Black</option>
    	<option value="dbrownbololeather8mm">8mm Bolo Leather Bracelet - Dark Brown</option>
    </select>
    
    <br/>
    
    <p>Clasp Type:</p>
    
    <select ID="claspselect"></select>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    9
    Rep Power
    0
    Thank you very much for your quick response. I tried to put it into place with no luck. I've gt the script in the html right before the close of the body tag is that makes any difference. Also while constructing the array I removed the "2"s from the second case. Is it not possible to have the exact same text and value in an object in an array?
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,187
    Rep Power
    184
    Originally Posted by h1erophant
    I've gt the script in the html right before the close of the body tag is that makes any difference.
    I wouldn't think that would make any difference; at least not in this case.
    Originally Posted by h1erophant
    Also while constructing the array I removed the "2"s from the second case. Is it not possible to have the exact same text and value in an object in an array?
    Yeah, although I do not understand what the purpose is of having a chained select menu with the exact same options; in the second select menu, no matter which option you select in the first select menu. To me..., that defeats the purpose of having multiple options; for a chained select menu.
    Originally Posted by h1erophant
    I tried to put it into place with no luck.
    Just try to follow the pattern in the example, that I provided you. You also may want to research JSON, because that will give you a better understanding of the array's structure (in my example).
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    9
    Rep Power
    0
    I've implemented the array and code, I've been using jsfiddle to try and figure out what I'm doing wrong. So far no luck. I checked out json a little bit and found out that I'm working with an array full of arrays full of objects. I''ll post the section of the html which the js concerns. Thank you again for your help.
    Not all of the options are the same, but some of them are.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    9
    Rep Power
    0
    HTML/JS
    Code:
    <p>Leather Type:</p>
    <select ID="colorselect" onchange=SetClasps()>
    	<option value="bronzenappa6mm">6mm Nappa Braided Bracelet - Bronze</option>
    	<option value="chocolatenappa6mm">6mm Nappa Braided Bracelet - Chocolate</option>
    	<option value="coppernappa6mm">6mm Nappa Braided Bracelet - Copper</option>
    	<option value="gunmetalnappa6mm">6mm Nappa Braided Bracelet - Gunmetal</option>
    	<option value="pearlnappa6mm">6mm Nappa Braided Bracelet - Pearl</option>
    	<option value="blackbololeather6mm">6mm Bolo Leather Bracelet - Black</option>
    	<option value="blackbrownleather6mm">6mm Bolo Leather Bracelet - Black & Brown</option>
    	<option value="blackdoublew7mm">7mm Double Wrap Leather Bolo W/ Metal Rings - Black</option>
    	<option value="blackdoublewo7mm">7mm Double Wrap Leather Bolo W/O Metal Rings - Black</option>
    	<option value="blackbololeather8mm">8mm Bolo Leather Bracelet - Black</option>
    	<option value="dbrownbololeather8mm">8mm Bolo Leather Bracelet - Dark Brown</option>
    </select>
    </br>
    <p>Clasp Type:</p>
    <select ID="claspselect">
    </select>
    </center>
    <script type="text/javascript>
    	function SetClasps()
    	{
    	var Clasps=new Array;
    	Clasps[0] = { bronzenappa6mm : [
                           {value:"ssl",text:"Stainless Steel Locking"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    	Clasps[1] = { chocolatenappa6mmm : [
                           {value:"ssl",text:"Stainless Steel Locking"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    	Clasps[2] = { coppernappa6mm : [
                           {value:"ssl",text:"Stainless Steel Locking"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    	Clasps[3] = { gunmetalnappa6mm : [
                           {value:"ssb",text:"Stainless Steel Bullet"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    	Clasps[4] = { pearlnappa6mm : [
                           {value:"ssl",text:"Stainless Steel Locking"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    	Clasps[5] = { blackbololeather6mm : [
                           {value:"ssl",text:"Stainless Steel Locking"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    	Clasps[6] = { blackbrownleather6mm : [
                           {value:"ssl",text:"Stainless Steel Locking"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    	Clasps[7] = { blackdoublew7mm : [
                           {value:"ssb",text:"Stainless Steel Bullet"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    	Clasps[8] = { blackdoublewo7mm : [
                           {value:"ssb",text:"Stainless Steel Bullet"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    	Clasps[9] = { blackbololeather8mm : [
                           {value:"ssl",text:"Stainless Steel Locking"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    	Clasps[10] = { dbrownbololeather8mm : [
                           {value:"ssl",text:"Stainless Steel Locking"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    
            var colorsel = document.getElementById('colorselect');
            var claspsel = document.getElementById('claspselect');
    	var _val = colorsel.options[colorsel.selectedIndex].value;
    	claspsel.innerHTML="";
    
    		for (i = 0; i < Clasps[_val].length; i++){
    		
    		var op = document.createElement('option');
                     switch(_val){
                      case "bronzenappa6mm":
                       op.innerHTML = Clasps[colorsel.selectedIndex].bronzenappa6mm[i].text;
                       op.value = Clasps[colorsel.selectedIndex].bronzenappa6mm[i].value;
                       break;
                      case "chocolatenappa6mm":
                       op.innerHTML = Clasps[colorsel.selectedIndex].chocolatenappa6mmm[i].text;
                       op.value = Clasps[colorsel.selectedIndex].chocolatenappa6mmm[i].value;
                       break;
                      case "coppernappa6mm":
                       op.innerHTML = Clasps[colorsel.selectedIndex].coppernappa6mm[i].text;
                       op.value = Clasps[colorsel.selectedIndex].coppernappa6mm[i].value;
                       break;
                      case "gunmetalnappa6mm":
                       op.innerHTML = Clasps[colorsel.selectedIndex].gunmetalnappa6mm[i].text;
                       op.value = Clasps[colorsel.selectedIndex].gunmetalnappa6mm[i].value;
                       break;
                      case "pearlnappa6mm":
                       op.innerHTML = Clasps[colorsel.selectedIndex].pearlnappa6mm[i].text;
                       op.value = Clasps[colorsel.selectedIndex].pearlnappa6mm[i].value;
                       break;
                      case "blackbololeather6mm":
                       op.innerHTML = Clasps[colorsel.selectedIndex].blackbololeather6mm[i].text;
                       op.value = Clasps[colorsel.selectedIndex].blackbololeather6mm[i].value;
                       break;
                      case "blackbrownleather6mm":
                       op.innerHTML = Clasps[colorsel.selectedIndex].blackbrownleather6mm[i].text;
                       op.value = Clasps[colorsel.selectedIndex].blackbrownleather6mm[i].value;
                       break;
                      case "blackdoublew7mm":
                       op.innerHTML = Clasps[colorsel.selectedIndex].blackdoublew7mm[i].text;
                       op.value = Clasps[colorsel.selectedIndex].blackdoublew7mm[i].value;
                       break;
                      case "blackdoublewo7mm":
                       op.innerHTML = Clasps[colorsel.selectedIndex].blackdoublewo7mm[i].text;
                       op.value = Clasps[colorsel.selectedIndex].blackdoublewo7mm[i].value;
                       break;
                      case "blackbololeather8mm":
                       op.innerHTML = Clasps[colorsel.selectedIndex].blackbololeather8mm[i].text;
                       op.value = Clasps[colorsel.selectedIndex].blackbololeather8mm[i].value;
                       break;
                      case "dbrownbololeather8mm":
                       op.innerHTML = Clasps[colorsel.selectedIndex].dbrownbololeather8mm[i].text;
                       op.value = Clasps[colorsel.selectedIndex].dbrownbololeather8mm[i].value;
                       break;
                     }
    
                     claspsel.appendChild(op);
    
    		}
    
    	}
    </script>
  12. #7
  13. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,187
    Rep Power
    184
    Try this:
    Code:
    <script type="text/javascript">
    	function SetClasps()
    	{
    	var Clasps = new Array();
    	
    	Clasps[0] = { bronzenappa6mm : [
                           {value:"ssl",text:"Stainless Steel Locking"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    
    	Clasps[1] = { chocolatenappa6mmm : [
                           {value:"ssl",text:"Stainless Steel Locking"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    
    	Clasps[2] = { coppernappa6mm : [
                           {value:"ssl",text:"Stainless Steel Locking"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    
    	Clasps[3] = { gunmetalnappa6mm : [
                           {value:"ssb",text:"Stainless Steel Bullet"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    
    	Clasps[4] = { pearlnappa6mm : [
                           {value:"ssl",text:"Stainless Steel Locking"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    
    	Clasps[5] = { blackbololeather6mm : [
                           {value:"ssl",text:"Stainless Steel Locking"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    
    	Clasps[6] = { blackbrownleather6mm : [
                           {value:"ssl",text:"Stainless Steel Locking"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    
    	Clasps[7] = { blackdoublew7mm : [
                           {value:"ssb",text:"Stainless Steel Bullet"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    
    	Clasps[8] = { blackdoublewo7mm : [
                           {value:"ssb",text:"Stainless Steel Bullet"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    
    	Clasps[9] = { blackbololeather8mm : [
                           {value:"ssl",text:"Stainless Steel Locking"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    
    	Clasps[10] = { dbrownbololeather8mm : [
                           {value:"ssl",text:"Stainless Steel Locking"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    	
            var colorsel = document.getElementById('colorselect');
            var claspsel = document.getElementById('claspselect');
    	var _val = colorsel.options[colorsel.selectedIndex].value;
    	claspsel.innerHTML="";
    
    		 var op = document.createElement('option');
                     switch(_val){
                      case "bronzenappa6mm":
                      for (i = 0; i < Clasps[0].bronzenappa6mm.length; i++){
                       op.innerHTML = Clasps[0].bronzenappa6mm[i].text;
                       op.value = Clasps[0].bronzenappa6mm[i].value;
                      }
                       break;
                      case "chocolatenappa6mm":
                      for (i = 0; i < Clasps[1].chocolatenappa6mmm.length; i++){
                       op.innerHTML = Clasps[1].chocolatenappa6mmm[i].text;
                       op.value = Clasps[1].chocolatenappa6mmm[i].value;
                      }
                       break;
                      case "coppernappa6mm":
                      for (i = 0; i < Clasps[2].coppernappa6mm.length; i++){
                       op.innerHTML = Clasps[2].coppernappa6mm[i].text;
                       op.value = Clasps[2].coppernappa6mm[i].value;
                      }
                       break;
                      case "gunmetalnappa6mm":
                      for (i = 0; i < Clasps[3].gunmetalnappa6mm.length; i++){
                       op.innerHTML = Clasps[3].gunmetalnappa6mm[i].text;
                       op.value = Clasps[3].gunmetalnappa6mm[i].value;
                      }
                       break;
                      case "pearlnappa6mm":
                      for (i = 0; i < Clasps[4].pearlnappa6mm.length; i++){
                       op.innerHTML = Clasps[4].pearlnappa6mm[i].text;
                       op.value = Clasps[4].pearlnappa6mm[i].value;
                      }
                       break;
                      case "blackbololeather6mm":
                      for (i = 0; i < Clasps[5].blackbololeather6mm.length; i++){
                       op.innerHTML = Clasps[5].blackbololeather6mm[i].text;
                       op.value = Clasps[5].blackbololeather6mm[i].value;
                      }
                       break;
                      case "blackbrownleather6mm":
                      for (i = 0; i < Clasps[6].blackbrownleather6mm.length; i++){
                       op.innerHTML = Clasps[6].blackbrownleather6mm[i].text;
                       op.value = Clasps[6].blackbrownleather6mm[i].value;
                      }
                       break;
                      case "blackdoublew7mm":
                      for (i = 0; i < Clasps[7].blackdoublew7mm.length; i++){
                       op.innerHTML = Clasps[7].blackdoublew7mm[i].text;
                       op.value = Clasps[7].blackdoublew7mm[i].value;
                      }
                       break;
                      case "blackdoublewo7mm":
                      for (i = 0; i < Clasps[8].blackdoublewo7mm.length; i++){
                       op.innerHTML = Clasps[8].blackdoublewo7mm[i].text;
                       op.value = Clasps[8].blackdoublewo7mm[i].value;
                      }
                       break;
                      case "blackbololeather8mm":
                      for (i = 0; i < Clasps[9].blackbololeather8mm.length; i++){
                       op.innerHTML = Clasps[9].blackbololeather8mm[i].text;
                       op.value = Clasps[9].blackbololeather8mm[i].value;
                      }
                       break;
                      case "dbrownbololeather8mm":
                      for (i = 0; i < Clasps[10].dbrownbololeather8mm.length; i++){
                       op.innerHTML = Clasps[10].dbrownbololeather8mm[i].text;
                       op.value = Clasps[10].dbrownbololeather8mm[i].value;
                      }
                       break;
                     }
    
                     claspsel.appendChild(op);
    
    	}
    </script>
    
    <select ID="colorselect" onchange=SetClasps()>
    	<option value="bronzenappa6mm">6mm Nappa Braided Bracelet - Bronze</option>
    	<option value="chocolatenappa6mm">6mm Nappa Braided Bracelet - Chocolate</option>
    	<option value="coppernappa6mm">6mm Nappa Braided Bracelet - Copper</option>
    	<option value="gunmetalnappa6mm">6mm Nappa Braided Bracelet - Gunmetal</option>
    	<option value="pearlnappa6mm">6mm Nappa Braided Bracelet - Pearl</option>
    	<option value="blackbololeather6mm">6mm Bolo Leather Bracelet - Black</option>
    	<option value="blackbrownleather6mm">6mm Bolo Leather Bracelet - Black & Brown</option>
    	<option value="blackdoublew7mm">7mm Double Wrap Leather Bolo W/ Metal Rings - Black</option>
    	<option value="blackdoublewo7mm">7mm Double Wrap Leather Bolo W/O Metal Rings - Black</option>
    	<option value="blackbololeather8mm">8mm Bolo Leather Bracelet - Black</option>
    	<option value="dbrownbololeather8mm">8mm Bolo Leather Bracelet - Dark Brown</option>
    </select>
    
    <br/>
    
    <p>Clasp Type:</p>
    
    <select ID="claspselect"></select>
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    9
    Rep Power
    0
    No luck as of yet, I will have some more time to fiddle with it later. I think I might just scrap the idea and use this select box for the clasps, then write a javascript to enable and disable them based on whats selected in the first select box:
    HTML
    Code:
    <select name="claspselect" ID="claspselect">
    	<option selected="selected" disabled>--Select Clasp Type--</option>
    	<option value="ssl" disabled>Stainless Steel Locking</option>
    	<option value="ssm" disabled>Stainless Steel Magnetic</option>
    	<option value="ssb" disabled>Stainless Steel Bullet</option>
    </select>
    Thanks again for the help man, I will try a little more with this code later on, if I can't get it tonight I'm just going scrap it for my other idea.
  16. #9
  17. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,187
    Rep Power
    184
    Originally Posted by h1erophant
    No luck as of yet, I will have some more time to fiddle with it later.
    What do you mean "No luck as of yet"? All you have to do is copy and paste the code I provided you..., and... it works; just the way you wanted it defined.
    Originally Posted by h1erophant
    I think I might just scrap the idea and use this select box for the clasps, then write a javascript to enable and disable them based on whats selected in the first select box. I will try a little more with this code later on, if I can't get it tonight I'm just going scrap it for my other idea.
    That is kind of the point I was trying to make to you before; if your 2nd select menu; is basically going to have the same options, each time, either disable/enable it or show/hide it.
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    9
    Rep Power
    0
    I tried to cope and paste it with no luck.
    I've put together a new idea to see if it would work and no luck with this either as of yet : /

    This is what I've got so far and the associated HTML, the script is in the body tag at the end just before the body close tag. This script is more compact at least and not tough to work with in order to add new options so it should work, once I can get it working that is.

    HTML
    Code:
    <p>Leather Type:</p>
    <select name="colorselect" ID="colorselect" onchange=SetClasps()>
    	<option selected="selected" disabled>--Select Leather Color--</option>
    	<option value="bronzenappa6mm">6mm Nappa Braided Bracelet - Bronze</option>
    	<option value="chocolatenappa6mm">6mm Nappa Braided Bracelet - Chocolate</option>
    	<option value="coppernappa6mm">6mm Nappa Braided Bracelet - Copper</option>
    	<option value="gunmetalnappa6mm">6mm Nappa Braided Bracelet - Gunmetal</option>
    	<option value="pearlnappa6mm">6mm Nappa Braided Bracelet - Pearl</option>
    	<option value="blackbololeather6mm">6mm Bolo Leather Bracelet - Black</option>
    	<option value="blackbrownleather6mm">6mm Bolo Leather Bracelet - Black & Brown</option>
    	<option value="blackdoublew7mm">7mm Double Wrap Leather Bolo W/ Metal Rings - Black</option>
    	<option value="blackdoublewo7mm">7mm Double Wrap Leather Bolo W/O Metal Rings - Black</option>
    	<option value="blackbololeather8mm">8mm Bolo Leather Bracelet - Black</option>
    	<option value="dbrownbololeather8mm">8mm Bolo Leather Bracelet - Dark Brown</option>
    </select>
    </br>
    <p>Clasp Type:</p>
    <select name="claspselect" ID="claspselect">
    	<option selected="selected" disabled>--Select Clasp Type--</option>
    	<option value="ssl" disabled>Stainless Steel Locking</option>
    	<option value="ssm" disabled>Stainless Steel Magnetic</option>
    	<option value="ssb" disabled>Stainless Steel Bullet</option>
    </select>
    JAVASCRIPT
    Code:
    	function SetClasps()
    	{
            var colorsel = document.getElementById('colorselect');
            var claspsel = document.getElementById('claspselect');
    	var _val = colorsel.options[colorsel.selectedIndex].value;
    `	claspsel.options['ssl'].disabled = true;
    	claspsel.options['ssm'].disabled = true;
    	claspsel.options['ssb'].disabled = true;
                     switch(_val){
                      case "bronzenappa6mm":
    			claspsel.options['ssl'].disabled = "false";
    			claspsel.options['ssm'].disabled = "false";
                       break;
                      case "chocolatenappa6mm":
    			claspsel.options['ssl'].disabled = "false";
    			claspsel.options['ssm'].disabled = "false";
                       break;
                      case "coppernappa6mm":
    			claspsel.options['ssl'].disabled = "false";
    			claspsel.options['ssm'].disabled = "false";
                       break;
                      case "gunmetalnappa6mm":
    			claspsel.options['ssb'].disabled = "false";
    			claspsel.options['ssm'].disabled = "false";
                       break;
                      case "pearlnappa6mm":
    			claspsel.options['ssl'].disabled = "false";
    			claspsel.options['ssm'].disabled = "false";
                       break;
                      case "blackbololeather6mm":
    			claspsel.options['ssl'].disabled = "false";
    			claspsel.options['ssm'].disabled = "false";
                       break;
                      case "blackbrownleather6mm":
    			claspsel.options['ssl'].disabled = "false";
    			claspsel.options['ssm'].disabled = "false";
                       break;
                      case "blackdoublew7mm":
    			claspsel.options['ssb'].disabled = "false";
    			claspsel.options['ssm'].disabled = "false";
                       break;
                      case "blackdoublewo7mm":
    			claspsel.options['ssb'].disabled = "false";
    			claspsel.options['ssm'].disabled = "false";
                       break;
                      case "blackbololeather8mm":
    			claspsel.options['ssl'].disabled = "false";
    			claspsel.options['ssm'].disabled = "false";
                       break;
                      case "dbrownbololeather8mm":
    			claspsel.options['ssl'].disabled = "false";
    			claspsel.options['ssm'].disabled = "false";
                       break;
                     }
    	}
  20. #11
  21. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,187
    Rep Power
    184
    Originally Posted by h1erophant
    I tried to cope and paste it with no luck.
    I've put together a new idea to see if it would work and no luck with this either as of yet : /
    Ok, let's try this; what browser are you using to view the code in? Because the code I provided you works in: IE6+, FF, & Chrome.

    And..., you cannot disable specific options; you have to disable the complete select menu.
  22. #12
  23. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    Originally Posted by web_loone08
    And..., you cannot disable specific options; you have to disable the complete select menu.
    Are you sure?

    Comments on this post

    • web_loone08 agrees : Ok, maybe you can... lol. I can honestly say; that I didn't know that. :)
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  24. #13
  25. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    9
    Rep Power
    0
    Tried the code you provided again web_loone, got it to post the second object in the array but not the first. I tried moving the appendchild to the end of each for statement but with no success. Still working on this, thanks again for the help man, I am learning quite a bit here.
  26. #14
  27. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    9
    Rep Power
    0
    Got it without using if functions, just hard-coded the amount of options in there, for now its only two for each but it shouldn't be too hard to change if need be. I could probably do without the array, huh? Time to condense. Still wouldn't mind a solution to the problem I was having with the for statements if for nothing else for knowledges sake. Here it is though in case anyone was wondering how I got it to work.
    HTML/JAVASCRIPT
    Code:
    <script type="text/javascript">
    	function SetClasps()
    	{
    	var Clasps = new Array();
    	
    	Clasps[0] = { bronzenappa6mm : [
                           {value:"ssl",text:"Stainless Steel Locking"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    
    	Clasps[1] = { chocolatenappa6mmm : [
                           {value:"ssl",text:"Stainless Steel Locking"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    
    	Clasps[2] = { coppernappa6mm : [
                           {value:"ssl",text:"Stainless Steel Locking"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    
    	Clasps[3] = { gunmetalnappa6mm : [
                           {value:"ssb",text:"Stainless Steel Bullet"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    
    	Clasps[4] = { pearlnappa6mm : [
                           {value:"ssl",text:"Stainless Steel Locking"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    
    	Clasps[5] = { blackbololeather6mm : [
                           {value:"ssl",text:"Stainless Steel Locking"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    
    	Clasps[6] = { blackbrownleather6mm : [
                           {value:"ssl",text:"Stainless Steel Locking"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    
    	Clasps[7] = { blackdoublew7mm : [
                           {value:"ssb",text:"Stainless Steel Bullet"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    
    	Clasps[8] = { blackdoublewo7mm : [
                           {value:"ssb",text:"Stainless Steel Bullet"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    
    	Clasps[9] = { blackbololeather8mm : [
                           {value:"ssl",text:"Stainless Steel Locking"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    
    	Clasps[10] = { dbrownbololeather8mm : [
                           {value:"ssl",text:"Stainless Steel Locking"}, 
                           {value:"ssm",text:"Stainless Steel Magnetic"}
                          ]
                        };
    	
            var colorsel = document.getElementById('colorselect');
            var claspsel = document.getElementById('claspselect');
    	var _val = colorsel.options[colorsel.selectedIndex].value;
    	claspsel.length=1;
    		var op = document.createElement('option');
    		var op2 = document.createElement('option');
                     switch(_val){
                      case "bronzenappa6mm":
    			op.innerHTML = Clasps[0].bronzenappa6mm[0].text;
    			op.value = Clasps[0].bronzenappa6mm[0].value;
    			claspsel.appendChild(op);
    			op2.innerHTML = Clasps[0].bronzenappa6mm[1].text;
    			op2.value = Clasps[0].bronzenappa6mm[1].value;
    			claspsel.appendChild(op2);
                       break;
                      case "chocolatenappa6mm":
                       op.innerHTML = Clasps[1].chocolatenappa6mmm[0].text;
                       op.value = Clasps[1].chocolatenappa6mmm[0].value;
    			claspsel.appendChild(op);
                       op2.innerHTML = Clasps[1].chocolatenappa6mmm[1].text;
                       op2.value = Clasps[1].chocolatenappa6mmm[1].value;
    			claspsel.appendChild(op2);
                       break;
                      case "coppernappa6mm":
                       op.innerHTML = Clasps[2].coppernappa6mm[0].text;
                       op.value = Clasps[2].coppernappa6mm[0].value;
    			claspsel.appendChild(op);
                       op2.innerHTML = Clasps[2].coppernappa6mm[1].text;
                       op2.value = Clasps[2].coppernappa6mm[1].value;
    			claspsel.appendChild(op2);
                       break;
                      case "gunmetalnappa6mm":
                       op.innerHTML = Clasps[3].gunmetalnappa6mm[0].text;
                       op.value = Clasps[3].gunmetalnappa6mm[0].value;
    			claspsel.appendChild(op);
                       op2.innerHTML = Clasps[3].gunmetalnappa6mm[1].text;
                       op2.value = Clasps[3].gunmetalnappa6mm[1].value;
    			claspsel.appendChild(op2);
                       break;
                      case "pearlnappa6mm":
                       op.innerHTML = Clasps[4].pearlnappa6mm[0].text;
                       op.value = Clasps[4].pearlnappa6mm[0].value;
    			claspsel.appendChild(op);
                       op2.innerHTML = Clasps[4].pearlnappa6mm[1].text;
                       op2.value = Clasps[4].pearlnappa6mm[1].value;
    			claspsel.appendChild(op2);
                       break;
                      case "blackbololeather6mm":
                       op.innerHTML = Clasps[5].blackbololeather6mm[0].text;
                       op.value = Clasps[5].blackbololeather6mm[0].value;
    			claspsel.appendChild(op);
                       op2.innerHTML = Clasps[5].blackbololeather6mm[1].text;
                       op2.value = Clasps[5].blackbololeather6mm[1].value;
    			claspsel.appendChild(op2);
                       break;
                      case "blackbrownleather6mm":
                       op.innerHTML = Clasps[6].blackbrownleather6mm[0].text;
                       op.value = Clasps[6].blackbrownleather6mm[0].value;
    			claspsel.appendChild(op);
                       op2.innerHTML = Clasps[6].blackbrownleather6mm[1].text;
                       op2.value = Clasps[6].blackbrownleather6mm[1].value;
    			claspsel.appendChild(op2);
                       break;
                      case "blackdoublew7mm":
                       op.innerHTML = Clasps[7].blackdoublew7mm[0].text;
                       op.value = Clasps[7].blackdoublew7mm[0].value;
    			claspsel.appendChild(op);
                       op2.innerHTML = Clasps[7].blackdoublew7mm[1].text;
                       op2.value = Clasps[7].blackdoublew7mm[1].value;
    			claspsel.appendChild(op2);
                       break;
                      case "blackdoublewo7mm":
                       op.innerHTML = Clasps[8].blackdoublewo7mm[0].text;
                       op.value = Clasps[8].blackdoublewo7mm[0].value;
    			claspsel.appendChild(op);
                       op2.innerHTML = Clasps[8].blackdoublewo7mm[1].text;
                       op2.value = Clasps[8].blackdoublewo7mm[1].value;
    			claspsel.appendChild(op2);
                       break;
                      case "blackbololeather8mm":
                       op.innerHTML = Clasps[9].blackbololeather8mm[0].text;
                       op.value = Clasps[9].blackbololeather8mm[0].value;
    			claspsel.appendChild(op);
                       op2.innerHTML = Clasps[9].blackbololeather8mm[1].text;
                       op2.value = Clasps[9].blackbololeather8mm[1].value;
    			claspsel.appendChild(op2);
                       break;
                      case "dbrownbololeather8mm":
                       op.innerHTML = Clasps[10].dbrownbololeather8mm[0].text;
                       op.value = Clasps[10].dbrownbololeather8mm[0].value;
    			claspsel.appendChild(op);
                       op2.innerHTML = Clasps[10].dbrownbololeather8mm[1].text;
                       op2.value = Clasps[10].dbrownbololeather8mm[1].value;
    			claspsel.appendChild(op2);
                       break;
                     }
    
    	}
    </script>
    <select ID="colorselect" onchange=SetClasps()>
    	<option selected="selected" disabled>--Select Leather Color--</option>
    	<option value="bronzenappa6mm">6mm Nappa Braided Bracelet - Bronze</option>
    	<option value="chocolatenappa6mm">6mm Nappa Braided Bracelet - Chocolate</option>
    	<option value="coppernappa6mm">6mm Nappa Braided Bracelet - Copper</option>
    	<option value="gunmetalnappa6mm">6mm Nappa Braided Bracelet - Gunmetal</option>
    	<option value="pearlnappa6mm">6mm Nappa Braided Bracelet - Pearl</option>
    	<option value="blackbololeather6mm">6mm Bolo Leather Bracelet - Black</option>
    	<option value="blackbrownleather6mm">6mm Bolo Leather Bracelet - Black & Brown</option>
    	<option value="blackdoublew7mm">7mm Double Wrap Leather Bolo W/ Metal Rings - Black</option>
    	<option value="blackdoublewo7mm">7mm Double Wrap Leather Bolo W/O Metal Rings - Black</option>
    	<option value="blackbololeather8mm">8mm Bolo Leather Bracelet - Black</option>
    	<option value="dbrownbololeather8mm">8mm Bolo Leather Bracelet - Dark Brown</option>
    </select>
    <br/>
    <p>Clasp Type:</p>
    <select ID="claspselect">
    <option selected="selected" disabled>--Select Clasp Type--</option>
    </select>

IMN logo majestic logo threadwatch logo seochat tools logo