Очень красивая реализация — здесь.

Обнаружил прелюбопытнейших глюк. Допустим я генерю SELECT динамически, как это показано в прошлом примере. Этот SELECT вставляется в форму, которая в свою очередь расположена в таблице. Так вот, если тэг формы находится где-то внутри таблицы, то генерируемый налету SELECT (да и любой другой элемент формы) не попадает в форму. То есть, при субмите в массив $_POST (или $_GET) не попадают данные с этого SELECT'а. Удивительно!

Допустим, что вам необходимо сделать такую кобинацию выпадающих списков: список 1 — области, список 2 — города. Но так, что при выборе области из списка 1, в списке «Города» отображаются только города соответствующей облести. Как это сделать на jQuery?

СКРИПТЫ:

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. Все.

Дано: два поля input type=text. В первом необходимо указать клиента, а во втором выбрать домашнее животное, принадлежащее этому клиенту. Обычный использовать нельзя, ибо клиентов много и лазить по списку совсем не хочется.
Да и не нужно, есть ведь отличный плагин Autocomplete для JQuery.

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

Вначале создает 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 (); }

);
});

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

Наверняка, многие при разработке интерактивных веб-приложений, сталкивались с проблемой редактирования данных. Например, вот такая тривиальная ситуация. Имеется большая таблица данных. Необходимо предоставить пользователю удобный интерфейс для их редактирования. В идеале это должно выглядеть так: пользователь щелкнул по тексту мышкой, текст преобразовался в форму. Пользователь отредактировал данные, нажал Enter и текст обновился.

Такое решение довольно легко реализовать, если использовать плагин для 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» станет вести себя именно так, как я описал выше.