Niewiele myśli o Twoim kodzie
-
Dzięki AJAX spróbuj użyć JSON do wysyłania i pobierania danych, co da ci większą swobodę w zakresie zmiennych i interfejsu użytkownika.
-
Ponieważ używasz jQuery, staraj się używać go jak najwięcej, nie definiując zdarzeń online, jeśli zgrupujesz je w skrypcie, będzie Ci łatwiej nimi zarządzać.
-
Jeśli chodzi o wybór, przeładowanie ich jest dość trudne. W IE pamiętam, że nie mogłem dodać opcji, więc musisz załadować CAŁY wybór.
-
Nie używaj funkcji mysql_query PHP, są one dość przestarzałe. Przeczytaj i zastosuj to: Jak mogę zapobiec wstrzykiwaniu SQL w PHP?
-
Podczas ładowania wartości z AJAX, musisz dołączyć uchwyt do elementów DOM, dlatego używamy funkcji .on(), aby upewnić się, że dołącza uchwyt do elementów.
-
Spróbuj użyć nowszych bibliotek jQuery, ponieważ są one szybsze, mocniejsze i mają zwiększoną wydajność, 1.4 jest dość stare...
Napisałem Ci przykład listy krajów z wykorzystaniem powyższych rzeczy, aby dać Ci wskazówkę, jak to osiągnąć, weź to, co myślisz, że ci się podoba:
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>
stan.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
);
Dodałem, aby dać ci wskazówkę, jak to osiągnąć, jest to samodzielny przykład, a zobaczysz zmiany w skrzynce. Będziesz musiał dodać logikę PHP, ale chciałem pokazać Ci lepsze podejście, XD