СКРИПТЫ:

1. $(document).ready(function() {
2. $("#region").change(function(){
3.  id = $(this).attr('value');
4.  $.post("data_city.php",{id:id},AfterRegion);
5. });
6. });
7. function AfterRegion (data){
8.  $("#city").empty();
9.  $("#city").append(data);
10. }

HTML-код:

11. < div id=region>
12. < select>
13.  < option value=63>Самарская область
14.  < option value=77>Московская область
15.  < option value=23>Краснодарский край
16. < /select>
17.  < /div>
18. < div id=city>
19. < /div>

ПОЯСНЕНИЯ:

1. DIV с выпадающим списком городов изначально вообще пуст, так как он будет заполнятся динамически после выбора значения в списке областей.

2. После изменения значения в списке областей (строчка 2), мы узнаем код выбранной области (строчка 3) и вызывает процедуру data_city.php (строчка 4), которой передаем это код в виде параметра. Процедура data_city.php должа в качестве результата выдавать (echo или print) SELECT с требуемыми значениями.

После отработки процедуры, ее результат передается в функцию AfterRegion, которая очищает DIV с городами (вначале он и так пуст, но потом старые данные нужно затирать), и вставляет в него сгенерированный фунцией data_city.php выпадающий список.

3. Все.

Что нужно сделать, чтобы все заработало:

Вначале создает HTML-код:

<input type=text id=client taborder=1> здесь будет фамилия клиента
<input type=hidden id=client_id name=forma[client_id]> а здесь будет код клиента
<input type=text id=pet taborder=2> здесь будет кличка питомца
<input type=hidden id=pet_id name=forma[pet_id]> здесь будет код питомца

Теперь определяем обработчики для поля с клиентами:

$(document).ready (function (){
$(«#client»).autocomplete («data_clients.php», {});
}

data_clients.php выглядит следующим образом:

Подключение к базе опускаю, ибо и так понятно
$q = strtolower ($_GET["q"]);
if (!$q) return;
$rows = $DB->select («select * from clients»);
foreach ($rows as $numRow=>$c){
$id = $rows[$numRow]['id'];
$name=$rows[$numRow]['last_name'].' '.$rows[$numRow]['first_name'];
$name = Win1251toUTF8 ($name);
echo «$name|$id\n»;
}
?>

Обратите внимание, что полученные из базы данные нужно обязательно сконвертить в UTF8.

Все. После этого, набрав в поле пару букв, мы получим выпадающий список и подходящими клиентами. Чтобы в скрытое поле попадал код клиента нужно прописать еще вот что:

$(«#client»).result (function (event, data, formatted) {
var hidden = $(«#client_id»);
hidden.val (data[1]);
hidden.click ();
});

Первая часть работы закончилась. Вторая часть более сложная.

Во-первых, нам нужно передать код выбранного клиента. Для этого пишем маленькую JS-процедурку:

function getClientId () {
return document.getElementById ('client_id').value;
}

Затем указываем ее в качестве параметра для автозаполнения:

$(«#pet»).autocomplete («data_pets.php», {
extraParams: {bar: getClientId ()
}
});

PHP-скрипт data_pets.php приводит не буду, так как он почти идентичен скрипту data_clients.php. В SQL запросе пишем условие с учетом переменной $bar.

Вроде все. Но проблема в том, что при выборе клиента и изменении поля с кодом клиента, jQuery это изменение не замечает, так что скрипту data_pets.php передается все время один и тот же изначальный параметр. Нужно вручную указать на изменение. Именно для этого мы в обработчике «$(«#client»).» добавили строку «hidden.click ();». Теперь лишь нужно перезагрузить обработчик pet:

$(«#client_id»).click (function (){
$(«#pet»).attr («value»,'');
$(«#pet_id»).attr («value»,'');
$(«#pet»).unbind ().autocomplete («data_pets.php», {
extraParams: {bar: getClientId ()}
});

$(«#pet»).result (function (event, data, formatted) {
var hidden = $(«#pet_id»);
hidden.val (data[1]);
hidden.click (); }

);
});

Все. Теперь все работает.

Такое решение довольно легко реализовать, если использовать плагин для jQuery – jEditable, который я нашел в блоге Mike Tuupola.

Достаточно добавить на страницу следующий JS-код:

$(document).ready (function () {
$(«.edit»).editable («http://www.example.com/save.php», {
indicator : «Saving...»,
tooltip : 'Click to edit...'
});
});

В результате, любой контейнер (div, td, p и т.д.), помеченный стилем «edit» станет вести себя именно так, как я описал выше.