Málokdo přemýšlí o vašem kódu
-
S AJAX zkuste použít JSON k odesílání a načítání dat, dá vám to větší svobodu ohledně proměnných a uživatelského rozhraní.
-
Když používáte jQuery, snažte se jej používat co nejvíce, nedefinujte online události, pokud je seskupíte do skriptu, bude pro vás snazší to spravovat.
-
Pokud jde o výběr, je to docela složité znovu je načíst. V IE si pamatuji, že jsem nemohl přidat možnosti, takže musíte načíst výběr WHOLE.
-
Nepoužívejte PHP funkce mysql_query, jsou docela zastaralé. Přečtěte si a použijte toto: Jak mohu zabránit vkládání SQL v PHP?
-
Při načítání hodnot z AJAXu musíte připojit handler k prvkům DOM, proto použijte funkci .on(), abyste se ujistili, že připojí handler k prvkům.
-
Zkuste použít novější knihovny jQuery, protože jsou rychlejší, výkonnější a mají zvýšený výkon, 1.4 je dost stará...
Napsal jsem vám příklad rozbalovací nabídky zemí používajících výše uvedené věci, abyste měli představu, jak toho dosáhnout, vezměte si, co si myslíte, že se vám to líbí:
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>
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
);
Přidal jsem, abych vám dal představu, jak toho dosáhnout, je to samostatný příklad a uvidíte změny dropboxu. Budete muset přidat logiku PHP, ale chtěl jsem vám ukázat lepší přístup, XD