Drop down menus

crazy8 · February 8, 2007

I am putting together a 3rd party cart for a buddy of mine. He has an account through paypal and the original cart he had sucked to say the least. So he decided he wanted dropdown menus and such. Well I have all the dropdown menus done and a little piece of javascript that someone gave me and should work but it isnt. I was hoping that maybe someone in here might know why or might have some better code perhaps that would work.

Here is what the code is supposed to do. I have 2 dropdown menus which are repeated through out the site, so there is many instances of the exact same dropdowns. One is for selecting a brand of bike and the other is for models.

So when you select a brand then the "Models" dropdown will fill with ONLY the models pertainign to that bike.Now this is also the first time EVER for me to play with javascript so I may need more "n00b" friendly help then others

Here is the js

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var bikes = new Array();

bikes[0] = new Array();
bikes[0]['bike_name'] = 'Cobra';
bikes[0]['bike_models'] = new Array();
bikes[0]['bike_models'][0] = 'Cobra King 50';
bikes[0]['bike_models'][1] = 'CM50';  

bikes[1] = new Array();
bikes[1]['bike_name'] = 'Honda';
bikes[1]['bike_models'] = new Array();
bikes[1]['bike_models'][0] = 'CR80';
bikes[1]['bike_models'][1] = 'CR85';
bikes[1]['bike_models'][2] = 'CR125';
bikes[1]['bike_models'][3] = 'CR250';
bikes[1]['bike_models'][4] = 'CR500';
bikes[1]['bike_models'][5] = 'CRF50';
bikes[1]['bike_models'][6] = 'CRF150';
bikes[1]['bike_models'][7] = 'CRF250';
bikes[1]['bike_models'][8] = 'CRF450';

bikes[2] = new Array();
bikes[2]['bike_name'] = 'KTM';
bikes[2]['bike_models'] = new Array();
bikes[2]['bike_models'][0] = 'KTM50';
bikes[2]['bike_models'][1] = 'KTM65';
bikes[2]['bike_models'][2] = 'KTM85';
bikes[2]['bike_models'][3] = 'KTM125';
bikes[2]['bike_models'][4] = 'KTM250';
bikes[2]['bike_models'][5] = 'KTM450';

bikes[3] = new Array();
bikes[3]['bike_name'] = 'KAWASAKI';
bikes[3]['bike_models'] = new Array();
bikes[3]['bike_models'][0] = 'KLX110';
bikes[3]['bike_models'][1] = 'KX60';
bikes[3]['bike_models'][2] = 'KX65';
bikes[3]['bike_models'][3] = 'KX80';
bikes[3]['bike_models'][4] = 'KX85';
bikes[3]['bike_models'][5] = 'KX125';
bikes[3]['bike_models'][6] = 'KX250';
bikes[3]['bike_models'][7] = 'KXF250';
bikes[3]['bike_models'][8] = 'KXF450';

bikes[4] = new Array();
bikes[4]['bike_name'] = 'SUZUKI';
bikes[4]['bike_models'] = new Array();
bikes[4]['bike_models'][0] = 'DZ110';
bikes[4]['bike_models'][1] = 'DRZ250';
bikes[4]['bike_models'][2] = 'DRZ400';
bikes[4]['bike_models'][3] = 'RM85';
bikes[4]['bike_models'][4] = 'RM125';
bikes[4]['bike_models'][5] = 'RM250';
bikes[4]['bike_models'][6] = 'RMZ250';
bikes[4]['bike_models'][7] = 'RMZ450';

bikes[5] = new Array();
bikes[5]['bike_name'] = 'YAMAHA';
bikes[5]['bike_models'] = new Array();
bikes[5]['bike_models'][0] = 'TTR50';
bikes[5]['bike_models'][1] = 'TTR90';
bikes[5]['bike_models'][2] = 'TTR125';
bikes[5]['bike_models'][3] = 'YZ80';
bikes[5]['bike_models'][4] = 'YZ85';
bikes[5]['bike_models'][5] = 'YZ125';
bikes[5]['bike_models'][6] = 'YZ250';
bikes[5]['bike_models'][7] = 'YZF250';
bikes[5]['bike_models'][8] = 'YZF450';

function fill() {
var bike_list=document.getElementById('os0');
var model_list=document.getElementById('os2');

for (i=0; i<bikes.length; i++) {
    var bike_name=bikes[i]['bike_name'];
    var opt=document.createElement('option');
    var val=document.createAttribute('value');
    var title=document.createTextNode(bike_name);
    opt.appendChild(title);
    val.value = title.nodeValue;
    opt.setAttributeNode(val)
    bike_list.appendChild(opt);
}

bike_list.onchange=function () {
var model_list=document.getElementById('os2');
    while(model_list.childNodes[1]) {
    model_list.removeChild(model_list.lastChild);
}

for (i=0; i<bikes.length; i++) {
    var bike_name=bikes[i]['bike_name'];
    if (this.value==bike_name) {
        var models=bikes[i]['bike_models'];
        for (i=0; i<models.length; i++) {
            var model=models[i];
            var opt=document.createElement('option');
            var val=document.createAttribute('value');
            var cName=document.createTextNode(model);
            opt.appendChild(cName);
            val.value = cName.nodeValue;
            opt.setAttributeNode(val)
            model_list.appendChild(opt);
                }
            }
        }
    }
}
window.onload=fill;</script>

And incase it helps at all here is the code for the page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>4MX Premium Motorsport Graphics - Numberplate Graphics</title>
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="" content="motocross graphics, MX graphics, ID plates, motocross decals, trailer graphics, hauler graphics">
<meta name="keywords" content="motocross, graphics, mx graphics, decals, pre printed graphics, numberplates, number plates, custom shrouds, shrouds, decals, motocross dealer, fender graphics, dirtbike graphics, motocross graphics, 4mx graphics minnesota, midwest motocross, hauler graphics, trailer graphics,mn motocross, minnesota motocross photos, minnesota motocross images, minnesota district 23, minnesota motocross racing photos, minnesota motocross, minnesota motocross pictures">
<meta name="description" content="Motocross and motorcycle racing graphics for bikes and haulers created in Minnesota">
<script type="text/javascript" src="list.js"></script>
<script language="JavaScript" type="text/JavaScript">
<!--



function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<style type="text/css">
<!--
body,td,th {
color: #FFFFFF;
}
body {
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
background-color: #000000;
}
-->
</style></head>

<body bgcolor="#000000" onload="fillCategory();">
<table width="540" border="0" cellspacing="0" cellpadding="0">
  <!--DWLayoutTable-->
  <tr> 
    <td height="30" colspan="2"><img src="images/center_numberplates.jpg" width="530" height="30"></td>
    <td width="1"></td>
  </tr>
  <tr> 
    <td height="49" colspan="2" valign="top"> <p><font size="2" face="Arial, Helvetica, sans-serif">Choose 
        from a standard numberplate design to one of our signature plate designs 
        such as the CarbonX Series. All plates include background color, and accent 
        color of your choice. Front name is optional. Please call for additional 
        logos. <strong><br>
        Click numberplate image to enlarge.</strong> </font></p></td>
    <td></td>
  </tr>
  <tr> 
    <td height="856" colspan="2" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <!--DWLayoutTable-->
        <tr> 
          <td width="295" rowspan="2" valign="top"><a href="numberplatestandard.html" target="_blank"></a><a href="numberplatestandard.html" target="_blank"></a><a href="images/numberplate_standard.jpg" target="_blank"><img src="images/photos_numberplates_11.jpg" width="294" height="130" border="0"></a></td>
          <td width="243" height="71"><img src="images/4495.jpg" width="236" height="65"></td>
          <td width="1"></td>
        </tr>
        <tr> 
          <td rowspan="3" valign="top"> <p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Standard 
              Numberplate Kit<br>
              Item # (NX 100)</strong> <br>
              <br>
              Standard Numberplate kit includes <strong>black, white or yellow 
              background</strong>, accent color, and personal number. <br>
              <br>
              Please specify your bike, year, model, stripe color and number below.</font></p>
            <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
              <table>
                <tr>
                  <td><input type="hidden" name="on0" value="Bike">
                    Bike</td>
                  <td><select name="os0" onChange="Selectos2();">
			  <option value="">-- select --</option>
                  </select>
                  </td>
                </tr>
                 <tr>
                  <td><input type="hidden" name="on1" value="Year">
                    Year</td>
                  <td><select name="os1" id="os1">
                  </select>
                  </td>
                </tr>
                <tr>
                  <td><input type="hidden" name="on2" value="Model">
                    Model</td>
                  <td><select name="os2" id="os2"><option>-- select --</option>
                  </select>
                  </td>
                </tr>
                <tr> 
                  <td><input type="hidden" name="on3" value="Stripe Color">
                    Stripe Color</td>
                  <td><input type="text" name="os3" maxlength="200"></td>
                </tr>
			<tr> 
                  <td><input type="hidden" name="on4" value="Number">
                    Number</td>
                  <td><input type="text" name="os4" maxlength="200"></td>
                </tr>
              </table>
              <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but22.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
              <input type="hidden" name="add" value="1">
              <input type="hidden" name="cmd" value="_cart">
              <input type="hidden" name="business" value="brent@4mxgraphics.com">
              <input type="hidden" name="item_name" value="Standard Numberplate Kit">
              <input type="hidden" name="item_number" value="NX 100">
              <input type="hidden" name="amount" value="44.95">
              <input type="hidden" name="no_shipping" value="2">
              <input type="hidden" name="return" value="http://www.4mxgraphics.com">
              <input type="hidden" name="currency_code" value="USD">
              <input type="hidden" name="lc" value="US">
              <input type="hidden" name="bn" value="PP-ShopCartBF">
            </form></p>
            </td>
          <td height="50"></td>
        </tr>
        <tr> 
          <td height="260" valign="top"><img src="images/photos_numberplates_10.jpg" width="294" height="260"></td>
          <td></td>
        </tr>
        <tr> 
          <td height="34"> </td>
          <td></td>
        </tr>
        <tr> 
          <td rowspan="2" valign="top"><a href="numberplateclassic.htm" target="_blank"></a><a href="images/numberplate_killer.jpg" target="_blank"><img src="images/photos_numberplates_killer.jpg" width="294" height="130" border="0"></a></td>
          <td height="60" valign="top"><img src="images/5495.jpg" width="236" height="65"></td>
          <td></td>
        </tr>
        <tr> 
          <td rowspan="2" valign="top"><p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Killer Numberplate Kit  <br>
              Item # (NX 101)</strong> <br>
              <br>
              The killer numberplate kit includes a <strong>black, white or yellow background</strong> 
              with an accent color, name (optional) and personal number. <br>
              <br>
              Please specify your bike, year, model, front name (optional), number 
              and accent color accordingly.</font></p>
            <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
              <table>
                <tr>
                  <td><input type="hidden" name="on0" value="Bike">
                    Bike</td>
                  <td><select name="os0" id="os0"><option>-- select --</option>
                  </select>
                  </td>
                </tr>
                 <tr>
                  <td><input type="hidden" name="on1" value="Year">
                    Year</td>
                  <td><select name="os1" id="os1">
                  </select>
                  </td>
                </tr>
                <tr>
                  <td><input type="hidden" name="on2" value="Model">
                    Model</td>
                  <td><select name="os2" id="os2"><option>-- select --</option>
                  </select>
                  </td>
                </tr>
                <tr> 
                  <td><input type="hidden" name="on3" value="Stripe Color">
                    Stripe Color</td>
                  <td><input type="text" name="os3" maxlength="200"></td>
                </tr>
			<tr> 
                  <td><input type="hidden" name="on4" value="Number">
                    Number</td>
                  <td><input type="text" name="os4" maxlength="200"></td>
                </tr>
              </table>
              <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but22.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
              <input type="hidden" name="add" value="1">
              <input type="hidden" name="cmd" value="_cart">
              <input type="hidden" name="business" value="brent@4mxgraphics.com">
              <input type="hidden" name="item_name" value="Killer Numberplate Kit">
              <input type="hidden" name="item_number" value="NX 101">
              <input type="hidden" name="amount" value="54.95">
              <input type="hidden" name="no_shipping" value="2">
              <input type="hidden" name="return" value="http://www.4mxgraphics.com">
              <input type="hidden" name="currency_code" value="USD">
              <input type="hidden" name="lc" value="US">
              <input type="hidden" name="bn" value="PP-ShopCartBF">
            </form></td>
          <td height="69"></td>
        </tr>
        <tr> 
          <td height="288" valign="top"><img src="images/photos_numberplates_10.jpg" width="294" height="260"></td>
          <td></td>
        </tr>
      </table></td>
    <td></td>
  </tr>
  <tr> 
    <td width="294" rowspan="2" valign="top"><a href="numberplatecarbonx.html" target="_blank"></a><a href="images/numberplate_grafiti.jpg" target="_blank"><img src="images/photos_numberplates_grafiti.jpg" width="294" height="130" border="0"></a></td>
    <td width="245" height="68" valign="top"><img src="images/5995.jpg" width="236" height="65"></td>
    <td></td>
  </tr>
  <tr> 
    <td rowspan="2" valign="top"><p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Grafiti Numberplate Kit  <br>
        Item # (NX 103)</strong> <br>
        <br>
        Includes <strong>black, white or yellow background.</strong> Grafiti swoosh with an accent color of your choice. 
        Name or logo also included.</font></p>
      <p><font size="2" face="Arial, Helvetica, sans-serif">Please specify your 
        bike, year model, front name or logo (if looking for a logo please call 
        to order), and accent color accordingly.</font></p>
      <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
        <table>
                <tr>
                  <td><input type="hidden" name="on0" value="Bike">
                    Bike</td>
                  <td><select name="os0" id="os0"><option>-- select --</option>
                  </select>
                  </td>
                </tr>
                 <tr>
                  <td><input type="hidden" name="on1" value="Year">
                    Year</td>
                  <td><select name="os1" id="os1">
                  </select>
                  </td>
                </tr>
                <tr>
                  <td><input type="hidden" name="on2" value="Model">
                    Model</td>
                  <td><select name="os2" id="os2"><option>-- select --</option>
                  </select>
                  </td>
                </tr>
                <tr> 
                  <td><input type="hidden" name="on3" value="Stripe Color">
                    Stripe Color</td>
                  <td><input type="text" name="os3" maxlength="200"></td>
                </tr>
			<tr> 
                  <td><input type="hidden" name="on4" value="Number">
                    Number</td>
                  <td><input type="text" name="os4" maxlength="200"></td>
                </tr>
              </table>
        <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but22.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
        <input type="hidden" name="add" value="1">
        <input type="hidden" name="cmd" value="_cart">
        <input type="hidden" name="business" value="brent@4mxgraphics.com">
        <input type="hidden" name="item_name" value="Grafiti Numberplate Kit">
        <input type="hidden" name="item_number" value="NX 103">
        <input type="hidden" name="amount" value="59.95">
        <input type="hidden" name="no_shipping" value="2">
        <input type="hidden" name="return" value="http://www.4mxgraphics.com">
        <input type="hidden" name="currency_code" value="USD">
        <input type="hidden" name="lc" value="US">
        <input type="hidden" name="bn" value="PP-ShopCartBF">
      </form></td>
    <td height="90"></td>
  </tr>
  <tr> 
    <td height="270" valign="top"><img src="images/photos_numberplates_10.jpg" width="294" height="260"></td>
    <td></td>
  </tr>
</table>

</body>
</html>

I would like to use the js as an extrernal file since it will be used for quite a few pages and also so I can edit one file rather then a ton of them.

Any help on this and getting it working would be greatly appreciated

artacus · February 8, 2007

This is old school. We use Ajax to do this stuff now.

Anyhow, to use document.getElementById() you actually have to have an ID tag, you do not.

<select name="os0" onChange="Selectos2();">
should be
<select name="os0" id="os0" onChange="Selectos2();">

crazy8 · February 8, 2007

Well actually I did have the ID in there at one time if you look in all the other spots. Anyway Even when I have the ID in there it still doesnt seem to work. It did at one time and I dont know what happened? Do you by chance see anything else that may cause this to be so difficult? Would this "Ajax" be any better or easier?

artacus · February 8, 2007

Your body onload and os0 onchange are calling functions that I don't see.

Ajax is easier because you don't have to create these huge js arrays. You just make a database call and say give me all of the honda models.

crazy8 · February 9, 2007

well both of those were from another script I was trying. I suppose with all the things I was trying I forgot to take out other things pertaining to that stuff. the onload="fillCategory();"> was actually set to onload="fillos0();"> since that is the name of my dropdown and to my understanding from what I was reading I edited onChange="Selectos2();"> which was also part of another script I was trying. I was under the impression that it was supposed to "onchange of this dropdown selectos2" which in the script pertains to all the modles. Anyway about the Ajax thing, is there a wbsite I can goto read up on it? Is it something a beginner should attempt? Is it just code or something that has to be installed on my clients server? I will say I like the thought of having just one js file though. I know this script enough to make any futured edits I may have to make to add new models and such so if I can get this working somehow and I have my doubts, it would be great but I also want to get this done soon.

Thank you for your time and help.

artacus · February 9, 2007

Anyway about the Ajax thing, is there a wbsite I can goto read up on it?

You're here. Look around.

The ajax stuff will be do-once, include everywhere also.

crazy8 · February 9, 2007

Well I found the AJAX part of the forum and looked at the sticky here

http://www.phpfreaks.com/forums/index.php/topic,115581.0.html

Ill be honest that first .js file has be confused, lost, and scared to even attempt it. Maybe Ill look into it more or see if I can get some help on putting together code in Ajax that I need to do this.

Sign In

Drop down menus

Recommended Posts

crazy8

Link to comment

Share on other sites

artacus

Link to comment

Share on other sites

crazy8

Link to comment

Share on other sites

artacus

Link to comment

Share on other sites

crazy8

Link to comment

Share on other sites

artacus

Link to comment

Share on other sites

crazy8

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information