动态填充两个<;选择>;列表


Dynamically populating two <select> list from SQL database

我有一个关于如何从SQL数据库中填充两个单独列表的查询,我的数据库如下所示;

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

我想知道如何创建一个选择列表来显示shoe_type,第二个列表根据shoe_type动态更改,以显示shoe_color。

例如,在第一个选择列表中选择"Brogue",然后在第二个选择列表显示"Brown"answers"Black"。

提前谢谢。

如果数据库被预取,您可以根据数据库生成此结构:

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'
    }
}

以及在HTML生成器中:

<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>

现在,如果您可以在会话中保存$_POST['type']和$_POSD['color']以供以后使用,那么您根本不需要JS,即使浏览器上禁用了JS,您的代码也能正常工作。

但如果你喜欢,你可以使用JS。Json对其进行编码并在javascript中使用。相反,唯一的方法是使用AJAX。

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