Bem, navegando pela net achei um tutorial legal sobre JSON com jQuery, PHP e MySQL.
E resolvi postar…
Este post mostra como preencher uma caixa de seleção com base no valor de outra, pela obtenção de dados JSON com jQuery a partir de um script PHP que obtém os dados de um banco de dados MySQL.
Código HTML
O código em HTML inicial é assim:
[code language=”html”]
<pre>
<div><form></div>
Frutas:</div>
<select name=”name” id=”fruitName”>
<option>Maçã</option>
<option>Laranja</option
<option>Banana</option>
<option>Pera</option>
</select>
</form>
Veriedades:
<select name=”variety” id=”fruitVariety”>
</select>
[/code]
O conjunto de nomes de frutas já está habitado no lado do servidor e o conjunto padrão de variedades pode ser muito, para preenchê-los com Javascript siga este tutorial.
Código jQuery
O código jQuery precisa inicialmente preencher o select das variedades com base no valor do select de frutos. Em seguida, ele necessita de atualizar as variedades o select de fruta mudar.
Supondo que o script PHP para pegar a fruta está em “/variedades.php” faça isso:
[code language=”jquery”]
function popularfrutas() {
$.getJSON(‘/variedades.php’, {fruitName:$(‘#fruitName’).val()}, function(data) {
var select = $(‘#fruitVariety’);
var options = select.attr(‘options’);
options[options.length] =
$(‘option’, select).remove();</div>
$.each(data, function(index, array) {
new Option(array[‘variety’]);
});
});
}
$(document).ready(function() {
<pre>
<pre>
<pre>popularfrutas</pre>
</pre>
</pre>
();
$(‘#fruitName’).change(function() {
populateFruitVariety();
});
});</pre>
</pre>
[/code]
new Option(array['variety']); });
}); } $(document).ready(function() { eFruitVariety(); $('#fruitName').change(function() { populateFruitVariety(); }); });
PHP Code
e, $password);
$rows = array(); if(isset($_GET['fruitName']))
$stmt->execute(array($_GET['fruitName']));