Question

At the moment I using a dynamic select to populate a dropdown. What I would like to do is display a 2nd dropdown with results based on the selection of the first. I have no idea how to go about this and have searched for an answer but to no avail. I have included the code I using to populate the first menu, and if you need any further code, please let me know. I am quite willing to look at jQuery or javascript if someone could help with the code. Many thanks

<form id="boxform" method="post" class="webform" name="boxform" />

        <label for="company">Select a Company:</label>
                <select name="company" id="company" />
                    <option SELECTED VALUE="">Select a Company</option>
                        <?php
                          do {  
                        ?>
                    <option value="<?php echo $row_Recordsetcust['customer']?>"><?php echo $row_Recordsetcust['customer']?></option>
                        <?php

                    } 
                        while ($row_Recordsetcust = mysql_fetch_assoc($Recordsetcust));
                        $rows = mysql_num_rows($Recordsetcust);

                if($rows > 0)

                    {
                        mysql_data_seek($Recordsetcust, 0);
                        $row_Recordsetcust = mysql_fetch_assoc($Recordsetcust);
                    }

                         ?>
                 </select>

UPDATE:

This is the code for the 2nd dropdown in php format that I have at the moment if it would help move on with this, thanks

<label for="boxrtnaddress">Select Address</label>
     <select name="boxrtnaddress" id="boxrtvaddress" />
        <option SELECTED VALUE="">Select Delivery Address</option>

            <?php
            while ($row_rs_select_address2 = mysql_fetch_assoc($rs_select_address2))
            {  
                    $value=$row_rs_select_address2['address1_com']. " ". $row_rs_select_address2['address2_com']. " ". $row_rs_select_address2['address3_com']. " ". $row_rs_select_address2['town_com']. " ". $row_rs_select_address2['postcode_com'];
                    $caption=$row_rs_select_address2['address1_com']. " ". $row_rs_select_address2['address2_com']. " ". $row_rs_select_address2['address3_com']. " ". $row_rs_select_address2['town_com']. " ". $row_rs_select_address2['postcode_com'];
                    echo "<option value=\"", $value, "\">", $caption, "</option>";
            }
            ?>
    </select>

+++++++++++++SOLUTION++++++++++

<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script language="javascript" type="text/javascript">
      $(function() {
            $("#company").change(function() {
              if ($(this).val()!="") $.get("getOptions.php?customer=" + $(this).val(), function(data) {
                $("#divId").html(data);
                });
              });
      });
</script>

getOptions.php

<?php
    $customer = mysql_real_escape_string( $_GET["customer"] ); // not used here, it's the customer choosen

    $con = mysql_connect("localhost","root","");
    $db = "sample";
      if (!$con)
        {
        die('Could not connect: ' . mysql_error());
        }

        mysql_select_db($db, $con);
        $query_rs_select_address2 = sprintf("SELECT * FROM company_com where idcode_com = '$customer'");
        $rs_select_address2 = mysql_query($query_rs_select_address2, $con) or die(mysql_error());
        $row_rs_select_address2 = mysql_fetch_assoc($rs_select_address2);
        $totalRows_rs_select_address2 = mysql_num_rows($rs_select_address2);



                    $address=$row_rs_select_address2['address1_com']. " ". $row_rs_select_address2['address2_com']. " ". $row_rs_select_address2['address3_com']. " ". $row_rs_select_address2['town_com']. " ". $row_rs_select_address2['postcode_com'];
                     echo '<select name="customer">'.'<option value="">Select delivery address</option>'.'<option value="address">'.$address.'</option>'.'</select>';



?>

Answer 1

it may help, here is a fiddle

http://jsfiddle.net/gZzQr/

that dynamically appends a select based on the selection of first select the code is messy and dirty so im not gonna post it here 🙂

you can have a look at the following to better understand the working

change triggers when the selected value of a select is changed

is(':empty') checks whether the div to which the newly created `select
is to be appended is empty or not

http://api.jquery.com/is/

http://api.jquery.com/empty/

Edit
i’ll give you hints hopefully you’ll fill in the rest of code…

first of all what you need to do is handle the change event of your first drop down and when the value changes you can do an ajax, get, post request to your server, fetch the results and populate the second drop down, here is a useful stackoverflow link that may help you

php dropdown menu population

$("#firstDD").change(function(){
var value = $(this).val();//get the changed value of first dd(drop down)


//now do a post request 

$.post("results.php",{data:value},function(data){
//get the values here and populate the second drop down

});

});

in your results.php

get the value from first drop down

$val = $_POST['data'];
//now do the sql queries to fetch desired result
//and echo the results back

echo $results ;

here are some useful links

http://www.prodevtips.com/2008/08/15/jquery-json-with-php-json_encode-and-json_decode/

http://api.jquery.com/jQuery.post/

http://www.factsandpeople.com/facts-mainmenu-5/26-html-and-javascript/89-jquery-ajax-json-and-php