Dynamically Updating Select Boxes With Php Mysql Jquery Ajax

I am trying to populate an initial customer select box with results from PDO MySql via PHP. Then I would like the second contact select box to update with additional information re

Solution 1:

Maybe your second function should start on #customer change

Solution 2:

I see you used the contact select in ajax not customer as you described. However the code you wrote, you used the contact selector with change event, But the contact select box contain only one value, How can it change ??

<select name="contact" id="contact">
    <option>-Select a Contact-</option>
</select>

The previous select should has more than option to can change. Or I think you mean the #customer instead contact as following:-

 $("#customer").change(function(){
                 //  your code;
            });

Solution 3:

Why not just encode a JSON response with the ids and names?

foreach($db->query("SELECT * FROM contact WHERE cid = '$cid'") as$row) {
    $arr[] = array("id" => $row['id'], "name" => $row['name']);
}
echo json_encode($arr);

Then in your ajax response, you could do

$(document).ready(function () {
    $("#customer").change(function () {
        var cid = $("#customer").val();
        $.ajax({
            type: "post",
            url: "contact.php",
            data: {cid: cid},
            success: function (data) {
                var options = [];
                $.each(data, function () {
                    options.push('<option value="' + this.id + '">' + this.name + '</option>');
                });
                $("#contact").html(options.join(""));
            }
        });
    });
});