Pochi pensano al tuo codice
-
Con AJAX, prova a utilizzare JSON per inviare e recuperare dati, ti darà più libertà su vars e UI.
-
Dato che stai usando jQuery, cerca di usarlo il più possibile, non definendo gli eventi online, se li raggruppi nello script ti sarà più facile gestirlo.
-
Per quanto riguarda la selezione, è piuttosto complicato ricaricarli. In IE ricordo che non potevo aggiungere opzioni, quindi devi caricare l'INTERA selezione.
-
Non utilizzare le funzioni PHP mysql_query, sono piuttosto deprecate. Leggi e applica questo: Come posso prevenire l'SQL injection in PHP?
-
Quando carichi valori da AJAX, devi collegare il gestore agli elementi DOM, ecco perché usando la funzione .on(), per assicurarti che alleghi il gestore agli elementi.
-
Prova a usare le nuove librerie di jQuery, poiché sono più veloci, potenti e hanno prestazioni migliorate, la 1.4 è piuttosto vecchia...
Ti ho scritto un esempio di elenco a discesa dei paesi che utilizzano le cose sopra, per darti un'idea di come raggiungerlo, prendi quello che pensi ti piaccia:
indice.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>
state.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
);
Ho aggiunto per darti un'idea su come raggiungerlo, è un esempio autonomo e vedrai le modifiche della casella personale. Dovrai aggiungere la logica PHP, ma volevo mostrarti un approccio migliore, XD
