动态填充两个 <select> SQL数据库列表

Question

I have a query about how to populate two separate lists from an SQL database, my database looks like this;

shoe_id      shoe_type       shoe_color
_________________________________________
001          Hi-Top          Blue
002          Loafer          Black
003          Brogue          Brown
004          Brogue          Black
005          Loafer          Brown
006          Loafer          Red
007          Hi-Top          Yellow

I'm wondering how to create a select list to display the shoe_type and the second one to dynamically change depending on the shoe_type, to show the shoe_color.

For example, 'Brogue' is selected in the first select list and then both 'Brown' and 'Black' displayed in the second select list.

Thank you in advance.

Answer 1

You can produce this structure based on your database if it is prefetched:

shoes array(3) {
    ['Hi-Top'] => array(2) {
        [1] => 'Blue',
        [7] => 'Yellow'
    }
    ['Loafer'] => array(3) {
        [2] => 'Black',
        [5] => 'Brown',
        [6] => 'Red',
    }
    ['Brogue'] => array(2) {
        [3] => 'Brown',
        [4] => 'Black'
    }
}

and in HTML generator:

<select name="type">
    <?php foreach($shoes as $shoeType => $shoeColors): ?>
        <option value="<?= $shoeType ?>" <?php if(isset($_POST['type']) && $_POST['type'] == $shoeType) echo 'selected="selected"'?>><?= $shoeType?></option>
    <?php endforeach; ?>
</select>
<select name="color">
    <?php if (isset($_POST['type']) foreach($shoes[$_POST['type']] as $k => $v): ?>
        <option value="<?= $k ?>" <?php if(isset($_POST['color']) && $_POST['color'] == $k) echo 'selected="selected"'?>><?= $v ?></option>
    <?php endforeach; ?>
</select>

Now if you could save $_POST['type'] and $_POST['color'] in the session to use later on, you'd never need JS at all and your code works even if JS is disabled on the browser.

But if you like, you can use JS. Json encode it and use it in your javascript. Rather than that the only way is to use AJAX.

var shoes = <?= json_encode($shoes) ?>