#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2001
    Location
    Santa Barbara, CA, USA
    Posts
    11
    Rep Power
    0
    I was wondering if someone could point me in the right direction. I'm looking for some base javascript for conditional pulldown menus.

    Here's an example of what I mean by conditional pulldown menus. You have to pulldown menus on a page. The first one would have state and the second one would be city. If I selected California in the first, the second would only show California cities; i.e. San Francisco, Los Angeles. If I selected Ohio as the state the second would have Cleveland, Columbus.

    I'm going to try and replicate the javascript using PHP and MySQL and I need some examples to start with.

    Hope this is enough info.

    Thanks in advance.
    Tom
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2001
    Location
    New Zealand
    Posts
    167
    Rep Power
    14

    Might help?


    Hi Tom,

    Since you are going to end up using php/mySQL, this example might be of more use than a straight javascript example.

    This is for a page called dropbox.php:

    <html>

    <?php
    if (!$StateID)
    {
    ?>

    <head>
    <Script Language="Javascript">

    // This function is triggered when the value in the select box changes. It takes the selected value and encodes it to the url of the page, which is refreshed to allow the php code to re-run.

    function getCity()
    {
    var StateID = document.addressForm.State.options[document.addressForm.State.selectedIndex].value;

    StateID = escape(StateID);

    var goTo = "dropbox.php" + "?StateID=" + StateID;

    window.location = goTo;
    }

    </Script>
    </head>

    <body bgcolor="#FFFFFF" text="#000000">
    <form name="addressForm" method="post" action="">
    <p>State:
    <select name="State" size="1" onChange="getCity()">
    <option value="1">Ohio</option>
    <option value="2">California</option>
    <option value="3">New York</option>
    </select>
    </p>
    <p>City:
    <select name="city" size="1">
    <option value="Cleveland">Cleveland</option>
    <option value="Columbus">Columbus</option>
    </select></p>
    </form>
    </body>
    </html>

    <?php
    }

    if ($StateID)
    {
    ?>

    <head>
    </head>

    <body bgcolor="#FFFFFF" text="#000000">
    <form name="addressForm" method="post" action="">
    <p>State: <select name='State' size='1'>

    <?php
    if ($StateID == 1)
    {
    echo "<option value='1' selected>Ohio</option>";
    echo "</select>";
    echo "<p>City: <select name='city' size='1'>";
    echo "<option value='1' selected>Cleveland</option><option value='2'>Columbus</option>";
    echo "</select></p>";
    }
    elseif ($StateID == 2)
    {
    echo "<option value='2' selected>California</option>";
    echo "</select>";
    echo "<p>City: <select name='city' size='1'>";
    echo "<option value='3' selected>San Franscisco</option><option value='4'>Los Angeles</option>";
    echo "</select></p>";
    }
    elseif ($StateID == 3)
    {
    echo "<option value='3' selected>New York</option>";
    echo "</select>";
    echo "<p>City: <select name='city' size='1'>";
    echo "<option value='5' selected>New York</option><option value='6'>Townsville</option>";
    echo "</select></p>";
    }
    ?>

    </form>
    </body>
    </html>

    <?php
    }
    ?>

    You can easily replace that php code with code to reflect a result set from a mySQL query.

    Hope that this is of some help to you. (PS - forgive the fact that I have no idea of any other cities in NY State than NYC... I'm a Kiwi )

    Jen
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2001
    Location
    Santa Barbara, CA, USA
    Posts
    11
    Rep Power
    0
    Jen,

    Thanks it works and it maybe what I end up with but I have one concern. It reloads the page. It seems with javascript that wouldn't be an issue.

    Checkout www.scottdrake.net . The search menu with years on the top right is what I'm interested in.

    Thanks,
    Tom
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2001
    Location
    New York
    Posts
    122
    Rep Power
    14
    Tom, try calling the following function from the onChange event of your <select> tag:

    <script language="Javascript">
    function changeDependentList() {
    var states_index = (document.form.state_list.selectedIndex);
    var states_value = document.form.state_list.options[states_index].value;
    //document.form.city_list.length = 0;
    if (states_value != "") {
    states_index --;
    var state = document.form.state_list[states_index].value;
    var len = states[states_index].length
    for (i=0;i<len;i++) {
    document.form.city_list.length ++;
    document.form.city_list.options[i].value = states[states_index][i];
    document.form.city_list.options[i].text = states[states_index][i];
    }
    document.form.city_list.length = len;
    } else {
    document.form.city_list.length = 1;
    document.form.city_list.options[0].value = "";
    document.form.city_list.options[0].text = "choose a state first";
    }
    }

    var NY = new Array('New York','Albany','Yonkers','Monticello','Troy','Port Jervis');
    var MA = new Array('Boston','Springfield','Somerville');
    var GA = new Array('Atlanta','Macon','Augusta','Rome','Athens');

    var states = new Array(NY,MA,GA);
    </script>


    For changeDependentList() to work, the value attributes of your first select list should match the names of the three arrays of cities. Like so:

    <form name="form">
    <select name="state_list" onChange="changeDependentList()">
    <option value="">select one:</option>
    <option value="NY">New York</option>
    <option value="MA">Massachusets</option>
    <option value="GA">Georgia</option>
    </select>
    <select name="city_list">
    <option value="">__________________</option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    </select>
    </form>

    Also, your initial cities list must be as long as your largest array of cities, or Netscape will should some very odd behavior.

    Good luck,
    Scott

IMN logo majestic logo threadwatch logo seochat tools logo