Pocos pensamientos sobre tu código
-
Con AJAX, intente usar JSON para enviar y recuperar datos, le dará más libertad sobre vars y UI.
-
Como estás usando jQuery, trata de usarlo tanto como sea posible, sin definir eventos en línea, si los agrupas en el script te será más fácil administrarlo.
-
Sobre la selección, es bastante complicado recargarlos. En IE, recuerdo que no podía agregar opciones, por lo que debe cargar TODA la selección.
-
No use las funciones PHP mysql_query, están bastante obsoletas. Lea y aplique esto: ¿Cómo puedo evitar la inyección de SQL en PHP?
-
Al cargar valores desde AJAX, debe adjuntar el controlador a los elementos DOM, es por eso que usa la función .on() para asegurarse de que adjunta el controlador a los elementos.
-
Intente usar las bibliotecas más nuevas de jQuery, ya que son más rápidas, potentes y tienen un mayor rendimiento, 1.4 es bastante antiguo...
Te he escrito un ejemplo de lista desplegable de países usando las cosas anteriores, para darte una pista de cómo lograrlo, toma lo que creas que te gusta:
index.html:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
$(document).on('change', '#div_country select, #div_state select', function () {
var $type = $(this).attr('data-type');
var $id = $(this).val();
if ( $id != -1 ) {
loadSelect( $type, $id );
}
});
function loadSelect( $type, $id ) {
$.ajax({
type: 'post',
url: 'states.php',
cache: false,
data: {
'type': $type
, 'id': $id
},
dataType: 'json',
success: function (data) {
if ( data.result == true ) {
if (data.html !== undefined) {
var $div = '';
if ( $type == 'country') {
$div = 'state';
} else {
$div = 'city';
}
$( "#div_" + $div ).html(data.html);
}
} else {
alert('Something went wrong!');
}
}
});
}
});
</script>
<div id="div_country">
<select data-type="country">
<option value="-1">Select Country</option>
<option value="1">Spain</option>
<option value="2">France</option>
<option value="3">Germany</option>
</select>
</div>
<div id="div_state">
<select data-type="state">
<option value="-1">Select Country</option>
</select>
</div>
<div id="div_city">
<select>
<option value="-1">Select State</option>
</select>
</div>
</body>
</html>
estado.php
<?php
$type = isset( $_POST['type'] ) ? $_POST['type'] : '';
if ( !empty( $type ) ) {
switch ($type) {
case 'country':
$result = true;
$html = '<select data-type="state">
<option value="-1">Select State</option>
<option value="1">state 1</option>
<option value="2">state 2</option>
</select>';
break;
case 'state':
$result = true;
$html = '<select data-type="city">
<option value="-1">Select City</option>
<option value="1">city 1</option>
<option value="2">city 2</option>
</select>';
break;
default:
$result = false;
$html = '';
break;
}
}
$data = array(
'result' => $result,
'html' => $html
);
Lo agregué para darle una pista sobre cómo lograrlo, es un ejemplo independiente y verá los cambios en el buzón. Tendrás que agregar la lógica de PHP, pero quería mostrarte un mejor enfoque, XD
