我有一个关于如何从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) ?>