Aquí hay un procedimiento muy simple. Solo mostraré el esqueleto principal. Agregar flash-meat estará de tu parte.
Supongamos que tenemos dos <select>
en ajax.php
así:
<select id="parent">
<option value="1">value1</option>
<option value="2">value2</option>
<option value="3">value3</option>
<option value="4">value4</option>
</select>
<select id="child">
</select>
Entonces, ¿qué necesitamos? Necesitamos completar el segundo <select>
en caso de su selección.
Aquí viene la parte de javascript (ajax.php)
<script type="text/javascript">
$(function(){
$('#parent').change(function(){ //on change event
var parentVal = $('#parent').val(); //<----- get the value from the parent select
$.ajax({
url : 'process.php', //the url you are sending datas to which will again send the result
type : 'GET', //type of request, GET or POST
data : { parentValue: parentVal}, //Data you are sending
success : function(data){$('#child').html(data)}, // On success, it will populate the 2nd select
error : function(){alert('an error has occured')} //error message
})
})
})
</script>
Esto enviará la solicitud a process.php
Ahora viene el process.php
Aquí necesitamos los datos para completar el segundo <select>
Ahora lo que va dentro de <select>
?
<option value="someValue">someText</option>
Necesita generar algo como esto:
<option value="11">value11</option>
<option value="12">value12</option>
<option value="13">value13</option>
<option value="14">value14</option>
El valor y el texto interior se adaptan a tus necesidades.
Como vendrá de la base de datos:
- Puede obtener el valor de selección principal en
process.php
con$_GET['parentValue']
- Con ese valor, consulta la base de datos
- Luego, a partir del resultado devuelto por la base de datos, use un bucle
while
,foreach
ofor
(dependiendo de la forma en que lo esté recuperando), haga el<option value="someValue">someText</option>
. - ¡Has terminado!
Para selección múltiple
para hacer la vida un poco más fácil, puede usar chosen multiselect
Un consejo
mysql_*
es obsoleto. use PDO en su lugar. Aquí hay un enlace a un tutoría