SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    drop down edit values of three other drop downs

    I have a drop down menu with seven vehicle types.

    Code:
    <select id="cartypes">
    <option value="1">Car 1</option>
    <option value="2">Car 2</option>
    <option value="3">Car 3</option>
    <option value="4">Car 4</option>
    <option value="5">Car 5</option>
    <option value="6">Car 6</option>
    <option value="7">Car 7</option>
    </select>

    I have three other drop down menus which contain numbers from 1-8 (passengers, suitcases and carry ons)

    Code:
    <select id="passengers">
    <select id="suitcases">
    <select id="carryons">

    All three of the drop downs contain the following:

    Code:
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>

    I want to amend these three drop down menus (what options they contain) based on the choice of the car type.

    Ideally it would work like this, an onchange event on the cartype drop down:

    Code:
    If cartype = 1 THEN
    passengers drop down has values 1-4
    suitcases drop down has values 1-2
    carryons drop down has values 1-2
    
    ELSE
    
    If cartype = 2 THEN
    passengers drop down has values 1-4
    suitcases drop down has values 1-4
    carryons drop down has values 1-4
    etc, i can do the other cartypes once i know how it works.

    might be worth mentioning i'm using jquery.

    Thanks

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var FillArray=[];
    FillArray[1]=[4,3,2];
    FillArray[2]=[4,4,4];
    
    function Fill(){
     var ary=FillArray[document.getElementById('cartypes').value],selary=['passengers','suitcases','carryons'],sel,z0=0,z1a;
     for (;z0<selary.length;z0++){
      sel=document.getElementById(selary[z0]);
      sel.options.length=0;
      if (ary&&ary[z0]){
       for (z1a=0;z1a<ary[z0];z1a++){
        sel.options[z1a]=new Option(z1a+1,z1a+1);
       }
       sel.selectedIndex=0;
      }
     }
    }
    /*]]>*/
    </script></head>
    
    <body onload="Fill();">
    <select id="cartypes" onchange="Fill();" >
    <option value="1">Car 1</option>
    <option value="2">Car 2</option>
    <option value="3">Car 3</option>
    <option value="4">Car 4</option>
    <option value="5">Car 5</option>
    <option value="6">Car 6</option>
    <option value="7">Car 7</option>
    </select>
    <select id="passengers"></select>
    <select id="suitcases"></select>
    <select id="carryons"></select>
    </form>
    
    </body>
    
    </html>

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is brilliant. Thank you so much. Works like a charm and very easty to customize.

    Couldn't have asked for anything more.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •