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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Apr 2006
    Posts
    133
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Changing the second drop down according to the first one

    Hi All,

    I am a newbie in Javascript. I have the following drop down menus. First one is showing the dates. Second one is the number of days.

    I want to find a Javascript code which changes the number of days according to the selected date.


    For example: On the date of 26-08-2008 I want the "racnumberofdays" select menu show the options of 1-2-3-4 days. But if the client changes it to 27-08-2008, I need the script change the "racnumberofdays" select to the options of 1-2-3 only. I need this script not specific for this number of days or dates. Because they come from database.

    So basicly on change of "racstartDate" for each day from the first date of the options, I want the racnumberofdays decrease one day.

    I hope I could explain what I need.

    Please help

    Thanks
    telmessos

    <form>
    <table width="500" border="0" align="center" cellpadding="0" cellspacing="0" id="table1">
    <tr>
    <td width="113"><span class="stil2">Start Date :</span></td>
    <td width="387"><select name="racstartDate" class="stil2">

    <option value="8/26/2008">26-08-2008</option>

    <option value="8/27/2008">27-08-2008</option>

    <option value="8/28/2008">28-08-2008</option>

    <option value="8/29/2008">29-08-2008</option>

    </select> </td>
    </tr>
    <tr>
    <td><span class="stil2">Number of Days :</span></td>
    <td>
    <select name="racnumberofdays" class="stil2">

    <option value="1">1</option>

    <option value="2">2</option>

    <option value="3">3</option>

    <option value="4">4</option>

    </select> </td>
    </tr>
    <tr>
    <td><span class="stil2">Vehicle Type :</span></td>
    <td>

    <select name="vehicletype" size="1" class="stil2">
    <option>Choose Vehicle Type</option>

    <option value="luxuryvan">Luxury Van</option>

    <option value="carclass1">Car (Class 1)</option>

    <option value="carclass1">Car (Class 1)</option>

    <option value="carclass2">Car (Class 2)</option>

    <option value="peoplecarrier">People Carrier</option>

    </select>

    </td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td><input name="B1" type="submit" class="stil2" value="Add Rent A Car" />
    </td>
    </tr>
    </table></form>

  • #2
    Regular Coder
    Join Date
    Nov 2007
    Location
    Leeds, UK
    Posts
    514
    Thanks
    24
    Thanked 19 Times in 19 Posts
    There is 2 ways the Easy way loads of lists stored and load the correct
    or an AJAX way where you get this list from a DB

    Easy Way do this for each list chaning 1 to next number
    PHP Code:
    var 0;
    <
    script>
    var 
    output1;
    function 
    genList(listIDSpanIDListName)
    {
    var list =new array();
    var 
    val =new array();

    // This is list1
    list[0] = new array();
    val[0] = new array();

    list[
    0][0] = 'Text to show ';
    val[0][0] = 'value of text';

    list[
    0][1] = 'Next Text';
    list[
    0][1] = 'next value';

    // this is list 2
    list[1] = new array();
    val[1] = new array();

    list[
    1][0] = 'Text to show ';
    val[1][0] = 'value of text';

    list[
    1][1] = 'Next Text';
    list[
    1][1] = 'next value';

    output '<select name="'+ListName+'" size="1" class="stil2">';

    while (
    != list1.count())
    {
    output output+'<option value="'++val[listID][i]'">'+list[listID][i]+'</option>';
    i++;
    }
    output output+'</select>';

    document.getElementById(SpanID).innerHTML output;
    }
    </script> 
    I bilive this is correct if some one can varify for me i have a fealing the Arrays bit is wrong but not sure just google javascript arrays i think i am calling them wrong

    Then have your second list in a div or span with the id Select2 and This on you first list box onSelect="genList(this.value);" and just number your values in you first list values to the list number in the javascript for the second list

    And the Hard way learn how to use AJAX and then have fun lol

    UPDATED:::
    I have updated it a bit to allow you to use on multipule lists so you can chaneg the ID of the span or DIV arround you list so you can put it into the javascript call so onSelect="genList(*list number*,*output ID*, *List Name*);"
    Last edited by barkermn01; 08-08-2008 at 01:14 PM.

  • #3
    Regular Coder
    Join Date
    Nov 2007
    Location
    Leeds, UK
    Posts
    514
    Thanks
    24
    Thanked 19 Times in 19 Posts
    can i just ask did this work for you as i was not sure if my code was completly correct


  •  

    Posting Permissions

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