Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dynamically populating the list boxes

    Hi all,

    Please provide an idea of how to build dynamic list boxes using Javascript.

    I have 2 list boxes containing Origin and Destination of flights. If i select one Origin country then , second list box must populate only those countries which have flights.

    In the http://www.ryanair.com/site/EN/ site, If I select "Aarhus" as origin and it will show only 2 countries "Barcelona" & "London". When i see the code, it has pre-assigned arrays, whenever OnClick is triggered it is calling the function and populating the array values.

    But i need to populate the destinations from the database everytime i select the origin from the listbox 1. Simply saying that I can't hardcode the origin and destination arrays , as i need to get them from the database...

    Any help or suggestions are appreciated...

    Thanks,
    Raj

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Something like this?
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    var myval = [];
    //India
    myval['India']=['Bombay','Calcutta','Hyderabad','Jaipur','New Delhi'];
    //Pakistan
    myval['Pakistan']=['Faisalabad','Islamabad','Karachi','Lahore'];
    // and so on...
    function newOpt(v){//main function
    var root = document.getElementById('cities');
    removeEl(root);//removes the old childNodes
    for(var i=0;i<myval[v].length;i++){
    var opt = createEl('option');//creates option element
    var txt = document.createTextNode(myval[v][i])//creates textNode
    opt.appendChild(txt);//appends textNode
    createAt(opt,'value',myval[v][i])//sets the attribute
    root.appendChild(opt)//appends the element
    }
    }
    function removeEl(obj){
    while(obj.hasChildNodes()){
    obj.removeChild(obj.childNodes[0])
    }
    }
    function createEl(el){
    this.obj=document.createElement(el);
    return this.obj;
    }
    function createAt(obj,att,val){
    obj.setAttribute(att,val);
    return
    }
    </script>
    </head>
    <body>
    <select id="countries" onchange="if(this.selectedIndex>0){newOpt(this.value)}">
    <option value="">-- Select a country -- </option>
    <option value="India">India</option>
    <option value="Pakistan">Pakistan</option>
    </select>
    	
    <select id="cities">
    </select>
    </body>
    </html>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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