Достаточно часто встречается задача, когда при выборе категории из списка, надо открыть второй список подкатегорий, причем подкатегории у каждой категории свои. Задача решается довольно просто. Вот простейший пример, взятый мною из одного урока по AJAX.
<!DOCTYPE html>
<html>
<head>
<title>Формат JSON</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("select[name='country']").bind("change", function() {
$.get("s_3_4.php", {country: $("select[name='country']").val()}, function (data) {
data = JSON.parse(data);
$("select[name='city']").empty();
for (var id in data)
$("select[name='city']").append($("<option value='" + id + "'>" + data[id] + "</option>"));
});
});
});
</script>
</head>
<body>
<label>Страна:</label>
<select name="country">
<option value="0" selected="selected"></option>
<option value="1">Россия</option>
<option value="2">Украина</option>
</select>
<br />
<label>Город:</label>
<select name="city">
<option value="0"></option>
</select>
</body>
</html>
PHP-файл имеет следующий вид:
<?php
$rus = array("1"=>"Москва", "2"=>"Санкт-Петербург");
$ukr = array("3"=>"Киев", "4"=>"Одесса");
if ($_GET["country"]==1) echo json_encode($rus);
elseif ($_GET["country"]==2) echo json_encode($ukr);
?>
Для простейшего примера работает отлично. Но усложним немного задачу, приблизив ее к реальной. Предположим, городов у нас много, мы их получаем из базы, где хранятся они в произвольном порядке, и уже после извлечения из базы мы их сортируем по алфавиту.
<?php
$rus = array("1"=>"Москва", "2"=>"Санкт-Петербург", "3"=>"Волгоград", "4"=>"Новосибирск", "5"=>"Сочи", "6"=>"Новгород");
asort($rus);
$ukr = array("7"=>"Николаев", "8"=>"Киев", "9"=>"Львов", "10"=>"Одесса", "11"=>"Бердянск");
asort($ukr);
if ($_GET["country"]==1) echo json_encode($rus);
elseif ($_GET["country"]==2) echo json_encode($ukr);
?>
Однако при выборе страны города в выпадающем списке остаются отсортированными по индексу, а не по алфавиту! Все потому что данные передаются в формате JSON и в процессе передачи сортируются по индексу, а не по алфавиту.
Что же с этим делать? Преобразовать в массив и отсортировать уже его. Возможно, это не единственный способ, но при небольшом количестве подкатегорий он сработает быстро.
Скрипт приобретает следующий вид:
$(document).ready(function() {
$("select[name='country']").bind("change", function() {
$.get("s_3_4.php", {country: $("select[name='country']").val()}, function (data) {
data = JSON.parse(data);
$("select[name='city']").empty();
var array=[];
for(var k in data) {
var v = data[k];
array.push([k, v]);
}
// Функция сортировки по городу
function sCity(a, b) {
if (a[1] > b[1]) return 1;
else if (a[1] < b[1]) return -1; else return 0;
}
array.sort(sCity);
var a=[];
for(var i=0; i<array.length; i++) {
a= array[i];
$("select[name='city']").append($("<option value='" + a[0] + "'>" + a[1] + "</option>"));
}
});
});
});