With pure Javascript you can do it this way:
form.php
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script><scripttype="text/javascript">
function listarProdutos(categoria){
$.ajax({
url: 'listar.php',
data: {'categoria':categoria},
success: function(data) {
$('#lista').html(data);
}
});
}
</script>
</head>
<body>
<form>
<select id="categoria" name="categoria" onclick="listarProdutos(this.value);">
<option value="1">JOGOS</option>
<option value="2">ELETRONICOS</option>
<option value="3">ROUPAS</option>
</select>
Produtos:<br>
<div id="lista"></div>
</form>
</body>
</html>
When the combo option is changed it will call the file (example listar.php
), which takes 'input' from the user makes the query in the database (which is replaced by arrays, $ games, $ electronic and $ clothes) creates the checkboxes the HTML output is returned by AJAX and played in div
list. This example is simple I recommend that if possible remove echo <input...
per template, a suggestion of engine would be Smarty
<?php
function imprimirCheckbox($arr){
foreach($arr as $item){
echo '<input type="checkbox" name="produtos[]" value="'.$item.'" />'. $item .'<br>';
}
}
$jogos = array('COD', 'FIFA 2014', 'NFS');
$roupas = array('CAMISA', 'CALÇA', 'BERMUDA');
$eletronicos = array('PC','NOTEBOOK','TABLET');
if($_GET['categoria'] == 1){
imprimirCheckbox($jogos);
}else if($_GET['categoria'] == 2){
imprimirCheckbox($eletronicos);
}else{
imprimirCheckbox($roupas);
}