如果选择了选项，则在另一个选项中显示值

Question

I am new to php so please bear with me. I am trying to make a php webpage in which it has multiple Select options. If I select an option from the select field, I would like another select field to change its values related to the select option. Here is my php code.

<div class="form-group">
    <label for="Labels">Labels:</label>
    <select class="form-control" name="labels"  >
        <?php 
            $q = "SELECT * FROM Labels ORDER BY LABELS_ID ASC";
            $r = mysqli_query($dbc, $q);
            while ($opt = mysqli_fetch_array($r)) {
                echo "<option value='$opt[LABELS_ID]'>".$opt['LABELS']."</option>";  
            }
        ?>
    </select>
</div>

<div class="form-group">
    <label for="option_id">Options:</label>
    <select class="form-control" name="option_id" id="option_id" >
        <?php 
        $q = "SELECT * FROM OPTIONS ORDER BY OPTIONS ASC";
        $r = mysqli_query($dbc, $q);
        while ($opt = mysqli_fetch_array($r)) {
            echo "<option value='$opt[OPTIONS_ID]'>".$opt['OPTIONS']."</option>";  
        }

        ?>
    </select>
</div>

I am selecting the values from the database.

My Labels database is like this:
LABEL_ID    LABEL
10001            Food
10002            Electronics Or here is the image:
http://s7.postimg.org/npo87fi6j/Screen_Shot_2015_08_08_at_11_19_46_PM.png

My Options Database is like this:
OPTION_ID    OPTION    LABEL_ID
20001              Meat             10001
20002              Seafood        10001
20003              Chicken        10001
20004              Desktop       10002
20005              Laptop         10002

THANKS

Answer 1

You have three options:

Optgroup: If there are not a lot of data in the database, you can use optgroup. You will get only one select with your labels and the options are indented.

PHP: On the first page you just show the labels. You build a little form arround the select with a button for sending the selected data. The user selects a label and sends the data to the server.

Based on this data you make another sql query and html. The user will get another page, where she/he can select the options.

Javascript: The simplest way to perfom javascript is, to install jQuery, it is a Library.

Then you will create an event listener for your label select. If the user is changing the select, the second select will get active and will show the corresponding options.

This way needs, that you hold the complete data in the browser. So you need some kind of array or object in the HTML to hold it.

A more advanced way is to use ajax: If the user makes a select, an ajax call is made to the server. It is sending back the sql result and you have to create the second select via javascript.

What the best solution is, depends of the number of data, what you want to do with the selects, …

Because you are a beginner, I would start with the PHP thing.