Drop list based on another drop list

Question

hope you fine and well,

i have a drop down list that contains categories list as follows:

<div  class='form-group'>
    <br/>
        <label class='control-label col-md-2 'for='id_date'>Category</label>
            <div class='col-md-2' class='form-group' class='col-md-11'>
            <select class="form-control " id="sel1" ng-model="category" ng-init="" >
                        <?php
                        mysql_connect('localhost', 'root', '');

                        mysql_select_db('my');

                        $sql = "SELECT category FROM categories";

                        $result = mysql_query($sql);
                        while ($row = mysql_fetch_array($result)) {
                            echo "<option value='" . $row['category'] . "'>" . $row['category'] . "</option>";
                        } ?>
                        </select>
                        </div>
                    </div>

below this select, i have another select which is to choose element from the category as follows :

<div  class='form-group'>
   <br/>
        label class='control-label col-md-2 ' for='id_date'>element</label>
            <div class='col-md-2' class='form-group' class='col-md-11'>
            <select class="form-control"  id="sel12"   ng-model="elemnt" ng-init="" >
                        <?php
                        mysql_connect('localhost', 'root', '');

                        mysql_select_db('my');

                        $sql = "SELECT element FROM elements where category =   ";

                        $result = mysql_query($sql);
                        while ($row = mysql_fetch_array($result)) {
                            echo "<option value='" . $row['element'] . "'>" . $row['element'] . "</option>";
                        } ?>
                        </select>
                        </div>
                    </div>

how i can make the content of the second drop list to be based on the first drop list ?! e.g how i can put the input of the first drop list in the second SQL statement ?!

regards.

Answer 1

You can't do that with only php.

You must use javascript/Jquery and ajax.

Make a php script who load data from a request. After change your first select use ajax function who call your php script with the right value and update the second select.

<select class="form-control " id="sel1" ng-model="category" ng-init="" >
                        <?php
                    mysql_connect('localhost', 'root', '');

                    mysql_select_db('my');

                    $sql = "SELECT category FROM categories";

                    $result = mysql_query($sql);
                    while ($row = mysql_fetch_array($result)) {
                        echo "<option value='" . $row['category'] . "'>" . $row['category'] . "</option>";
                    } ?>
                    </select>

Jquery

$("#sel1").change(function(){
$.ajax({
  method: "POST",
  url: "yourscript.php",
  data: {myval : $(this).val()};
})
  .done(function( msg ) {
    //Here append your result in your second select
  });

});

PHP

<?php 
if(isset($_POST['myval']))
{
  //SQL query where id=myval
  echo $result;//result of query
}