Making a dropdown list dependent on another list in PHP

Question

I want to make a dropdown list that creates a new dropdown list dependent on the options made. I can do it in HTML using JavaScript using the following:

<div>
<legend> Question </legend>
     <select class="source" id="selType">
    <option>Select</option>
    <option value="A1"> Answer1 </option>
    <option value="A2"> Answer2 </option>
    <option value="A3"> Answer3 </option>
</select>
</div>
<div id="Answers">
<div id="A1" style="display: none;">
    <select id="Option1">
    <label>Select Workshop</label>
    <option value="1"> 1 </option>
    <option value="2"> 2 </option>
    <option value="3"> 3 </option>
    </select>
</div>

<div id="A2" style="display: none;">
    <select id="Option2">
        <-- list items -->
    </select>
</div>

<div id="A3" style="display: none;">
    <select id="Option3">
        <-- list items -->
    </select>
</div>
</div>  

<script>
$(function () {
$('#selType').change(function () {
    $('#Answers > div').hide();
    $('#Answers').find('#' + $(this).val()).show();
});
});
</script>

However, I can't seem to do the same using 2 lists made through data acquired with MySQL in PHP; as follows.

// Pull data for cluster names
$query="SELECT LIST_OF_CLUSTERS.CLUSTER_NAME
    FROM LIST_OF_CLUSTERS";

$data = mysqli_query($db_connect, $query) or die(mysqli_error());

// Create drop down list of cluster names
echo "<label>Location</label>";
echo "<select class='form-control' name='location1'>";
echo "<option value='All'>All</option>";
$number_results = mysqli_num_rows($data);
    while($results = mysqli_fetch_array($data)){
        echo "<OPTION value='". $results['CLUSTER_NAME'] ."'>" . $results['CLUSTER_NAME'] . "</option>";
    }
echo "</select>";


// Pull data for university names
$query="SELECT LIST_OF_UNIVERSITIES.UNIVERSITY_NAME
    FROM LIST_OF_UNIVERSITIES
    ORDER BY LIST_OF_UNIVERSITIES.UNIVERSITY_NAME";

$data = mysqli_query($db_connect, $query) or die(mysqli_error());

// Create drop down list of cluster names
echo "<label>University</label>";
echo "<select class='form-control' name='university1'>";
echo "<option value='All'>All</option>";
$number_results = mysqli_num_rows($data);
    while($results = mysqli_fetch_array($data)){
        echo "<OPTION value='". $results['UNIVERSITY_NAME'] ."'>". $results['UNIVERSITY_NAME'] . "</option>";
        }
echo "</select>";

In the database the university names are organised in clusters (north, south, east west etc) and the current code does a good job making a list of clusters and a list of universities (both of which starting with "All"), but with no correlation to each other. I tried to implement the JavaScript above through various id tags and trying to split the PHP up with but to no avail.

The university array in the database contains a value for each of the entries called "Cluster" which equals various numbers depending on which cluster they are in (0,1,2 etc) and I can make the list only show universities from the cluster by adding WHERE CLUSTER='n' to the following, so it's easy enough to create the lists I need, I just cant make them appear only when required;

// Pull data for uni names - South West
$query="SELECT LIST_OF_UNIVERSITIES.UNIVERSITY_NAME
    FROM LIST_OF_UNIVERSITIES
    WHERE CLUSTER='2'
    ORDER BY LIST_OF_UNIVERSITIES.UNIVERSITY_NAME";

Any help would be much appreciated :)

Answer 1

**Full Code with MVC dependent Drop down using Ajax **

                           <div class="col-md-4" id="cars_reff_idedt">
                            <select name="cars_reff_id" id="edtcars_reff_id" class="col-md-12" >
                                <option value="">--Select Car--</option>
                                <?php
                                foreach ($car as $new) {
                                    $sel = "";
                                    if (set_select('cars_reff_id', $new->id))
                                        $sel = "selected='selected'";
                                    echo '<option value="' . $new->id . '" ' . $sel . '>' . $new->name . '</option>';
                                }
                                ?>
                            </select>
                        </div>
                        <div class="col-md-4" id="chasis_id">
                            <select name="chasis_id" id="chasis_id" class="col-md-12" > </select>
                        </div> 



    <script>
//Dependent DropDown Car+Chessis
    $(document).on('change', '#edtcars_reff_id', function () {
        vch = $(this).val();
        if (vch) {
            $.ajax({
                url: '<?php echo site_url('admin/expense/getChessisNo') ?>',
                dataType: 'Json',
                data: {'id': vch},
                success: function (data) {
                    $('select[name="chasis_id"]').empty();
                    $.each(data, function (key, value) {
                        $('select[name="chasis_id"]').append('<option value="' + key + '">' + value + '</option>');
                    });
                }
            });
        } else {
            $('select[name="city"]').empty();
        }
    });
</script>

<?php
function getChessisNo() {
    $data = $this->car_model->getChessisByCarId($_GET['id']);
    $json = [];
    foreach ($data as $row) {
        $json[$row->id] = $row->number;
    }
    echo json_encode($json);
}

?>

Answer 2

Never mind, I got it in the end.

All it required was putting the php part inside the select bracket, which seems so obvious now. I guess I was just having a blank day :)

<div>
<label>University?</label>
<select class= "source form-control" id="selUni" name="university1">
    <option>Select</option>
    <option value='All'>All</option>
        <?php
        $number_results = mysqli_num_rows($data);
        while($results = mysqli_fetch_array($data)){
            echo "<OPTION value=\"". $results['UNIVERSITY_NAME'] . "\">". $results['UNIVERSITY_NAME'] . "</option>";
        }
        ?>
</select>
</div>