Для начала определим задачу: первый список будет содержать предварительно загруженные названия стран и всегда находиться в активном состоянии. Два оставшихся списка – выбора авто и выбора модели, пустые и находятся в неактивном состоянии. После того, как в первом списке будет выбрана страна необходимо заполнить второй список названиями автомобилей и перевести его в активное состояние. А после выбора названия автомобиля – заполнить список названиями моделей именно этого автомобиля и тоже активировать список. Кроме того, мы должны гарантировать, что пользователь никогда не сможет выбрать автомобиль «HONDA Vectra произведеный в Ю.Корее». Для обмена данными с сервером будем использовать популярный нынче формат JSON.

Итак, задача определена. Поехали?

Начнем с чего-нибудь очень простого. Например с подключения библиотеки jQuery и создания HTML-разметки:

В HEAD страницы подключаем библиотеку:

<script src="js/jquery-1.3.1.js" type="text/javascript"></script>

В BODY создаем HTML-разметку:

<div class="border">
  <label>Страна</label><br />
  <select id="country">
    <option value="">Выбрать страну</option>
    <option value="1">Германия</option>
    <option value="2">Ю.Корея</option>
    <option value="3">Япония</option>
  </select>
</div>
<div class="border">
  <label>Автомобиль</label><br />
  <select id="auto" disabled="disabled"></select>
</div>
<div class="border">
  <label>Модель</label><br />
  <select id="model" disabled="disabled"></select>
</div>

Легко и просто! Каждому списку – по id. Первый раскрывающийся список заполняем названиями стран. Два других ничем не заполняем и мало того, устанавливаем в неактивное состояние с помощью атрибута disabled. Описания стилей я приводить не буду – это дело вкуса каждого и не в тему этой статьи.

Что дальше? Задача оказалась не так уж и проста, как казалось в начале. Поэтому предлагаю пораскинуть мозгами и решить, какие общие действия мы будем производить над всеми списками. Я придумал два – заполнение списка и очистка списка. Давайте оформим эти операции в виде методов jQuery, чтобы иметь возможность в любой момент вызвать этот метод в цепочке команд jQuery.

Расширение для jQUery может быть либо методом, оперирующим с набором элементов, либо вспомогательной функцией, которая определяется непосредственно в $. Простой пример: в составе библиотеки есть метод each(callback), который работает как раз с набором элементов, выполняя функцию, определенную в параметре callback в контексте каждого элемента набора и вспомогательная функция $.each(object,callback), которая применяется для обхода массива или объекта, переданного в первом параметре с выполнением функции callback для каждого элемента массива(объекта). Почувствовали разницу?

(function($){
  // очищаем select
  $.fn.clearSelect = function() {
    return this.each(function(){
      if(this.tagName=='SELECT') {
        this.options.length = 0;
        $(this).attr('disabled','disabled');
      }
    });
  }
  // заполняем select
  $.fn.fillSelect = function(dataArray) {
    return this.clearSelect().each(function(){
      if(this.tagName=='SELECT') {
        var currentSelect = this;
        $.each(dataArray,function(index,data){
          var option = new Option(data.text,data.value);
          if($.support.cssFloat) {
            currentSelect.add(option,null);
          } else {
            currentSelect.add(option);
          }
        });
      }
    });
  }
})(jQuery);

Итак, что мы тут написали?

При написании метода clearSelect() мы воспользовались методом each(callback) для того, чтобы произвести необходимые операции над каждым элементом, переданным в наборе jQuery. Сначала производим проверку – если tagName переданного элемента действительно SELECT, то удаляем все элементы option и устанавливаем атрибуту disabled значение disabled.

Метод fillSelect(dataArray) несколько сложнее. Он получает в качестве параметра массив dataArray, содержащий данные, которыми необходимо заполнить выпадающий список. Правда перед тем, как заполнять список, мы вызовем метод clearSelect, чтобы очистить список от возможно оставшихся там данных. С помощью метода each(callback) мы перебираем все элементы, переданные в наборе jQuery, проверяем, действительно ли это элемент select и, если да, то сначала запоминаем его в переменной currentSelect. Затем воспользуемся вспомогательной функцией $.each(object,callback) для обхода массива dataArray. В каждой итерации создаем элемент options, заполняем его соответствующими данными и добавляем в select.

При добавлении option мы вынуждены учитывать различия между браузерами. К счастью и тут поможет jQuery. Здесь используем новую вспомогательную функцию $.support, которая появилась в jQuery с версии 1.3 взамен $.browser. Проверим значение свойства cssFloat – false укажет нам на IE, а true на FF, Opera, Safari. Вы можете применить свой способ проверки.

Обратите внимание: при написании метода fillSelect(dataArray) мы использовали метод each(callback) и вспомогательную функцию $.each(object,callback) – это разные вещи.

Теперь оба наших новых метода могут работать с набором элементов jQuery, который им будет передан. Этот код можно было бы вынести в отдельный файл – к тому же эти методы могут пригодиться и в других приложениях, а использовать их можно проще простого:

// очищаем select
$('select').clearSelect();
// заполняем select
$('select').fillSelect(dataArray);

Двигаемся дальше. Теперь мы напишем пару функций, которые будут обслуживать списки выбора автомобиля и выбора модели.

// выбор автомобиля
function adjustAuto(){
  var countryValue = $('#country').val();
  var tmpSelect = $('#auto');
  if(countryValue.length == 0) {
    tmpSelect.attr('disabled','disabled');
    tmpSelect.clearSelect();
    adjustModel();
  } else {
    $.getJSON(
      'cascadeSelectAuto.php',
      {country:countryValue},
      function(data) {
        tmpSelect.fillSelect(data).attr('disabled','');
        adjustModel();
    });
  }
};

Здесь мы сначала запоминаем в переменной countryValue значение, выбранное в списке стран #country. В переменной tmpSelect будем хранить ссылку на элемент select с идентификатором #auto – список выбора автомобиля. Далее следует проверка:

Если страна не выбрана, то мы устанавливаем атрибуту disabled элемента select с идентификатором #auto значение ‘disabled’ и вызываем метод clearSelect() для очистки этого списка от возможно находящихся там значений. Также мы вызовем функцию adjustModel() (про нее чуть позже).

Иначе, мы отправляем с помощью вспомогательной функции $.getJSON запрос к файлу cascadeSelectAuto.php, передавая в качестве данных значение, сохраненное в переменной countryValue. При получении ответа сервера вызываем функцию, в которой определена нужная нам последовательность действий. А именно – к переменной tmpSelect (не забыли – это список с идентификатором #auto) применяем нами же написанный метод fillSelect(data), который заполнит список данными, которые получены от сервера и наконец переводим элемент в активное состояние с помощью атрибута disabled. Остается не забыть вызвать функцию adjustModel(), чтобы обработать выпадающий список моделей.

Функция adjustModel(), которая обрабатывает список моделей, очень похожа на adjustAuto(), поэтому нет смысла ее детально рассматривать. Обратите внимание разве на то, что теперь мы запоминаем значение из списка не только выбранной страны, но и выбранного автомобиля. И еще в if – else не вызываем что-то похожее на adjustModel(), поскольку список выбора модели у нас последний – дальше обрабатывать просто нечего.

// выбор модели
function adjustModel(){
  var countryValue = $('#country').val();
  var autoValue = $('#auto').val();
  var tmpSelect = $('#model');
  if(countryValue.length == 0||autoValue.length == 0) {
    tmpSelect.attr('disabled','disabled');
    tmpSelect.clearSelect();
  } else {
    $.getJSON(
      'cascadeSelectModel.php',
      {country:countryValue,auto:autoValue},
      function(data) {
        tmpSelect.fillSelect(data).attr('disabled','');
    });
  }
};

Поздравляю! Самая сложная часть пути уже позади! Остались сущие пустяки.

$('#country').change(function(){
  adjustAuto();
}).change();

Связываем с выпадающим списком стран событие change(fn), при наступлении которого вызываем adjustAuto() – функцию, которая заполнит выпадающий список автомобилей. В цепочке команд вызываем change(), чтобы вызвать событие при начальной загрузке страницы.

$('#auto').change(adjustModel);

С выпадающим списком автомобилей связываем событие change(fn), при наступлении которого будет выполнена функция adjustModel(), которая заполнит список моделей.

$('#model').change(function(){
  if($(this).val().length != 0) {
    alert('Выбор сделан!');
  }
});

И наконец, при изменении списка моделей выполним небольшую проверку – если действительно выбрана какая-либо модель, выведем в alert сообщение. Ну а в действительности тут можно придумать все, что угодно. Например вывести подробную информацию о технических характеристиках, красивую фотографию авто, чтобы его захотелось купить и конечно цену…

Ах, да! Совсем забыл – работающий пример:

Вы можете открыть пример в новом окне, чтобы посмотреть исходный код. Вы можете скачать архив, который содержит файлы примера (в том числе cascadeSelectAuto.php и cascadeSelectModel.php).

Дуглас Крокфорд (Douglas Crockford), который собственно и предложил формат JSON в качестве альтернативы XML при передаче данных от сервера клиенту, в рамках этого проекта разработал специальную утилиту, предназначенную для упомянутых выше преобразований. Исходник можно найти по адресу http://www.json.org/js.html.

В предыдущей статье о JSON мы уже немного коснулись преобразования строки данных в объект JavaScript с помощью функции eval(), но все-таки нельзя забывать о том, что функция эта не только поможет интерпретировать данные в формат JSON, но и выполнит любой JavaScript-код, который будет ей передан. Так как это обстоятельство может представлять собой потенциальную угрозу, логичнее воспользоваться утилитой Дугласа Крокфорда.

Но давайте обо всем по порядку. Для начала подключим утилиту к нужному файлу:

<script src="json.js" type="text/javascript"></script>

Создадим объект oAuto обычным способом, забыв о литеральной нотации.

var oAuto = new Object();
oAuto.firm = "Audi";
oAuto.model = "A6";
oAuto.year = 2008;
oAuto.price = 78000;
oAuto.sellers = new Array(
  "Фирма А",
  "Фирма Б",
  "Фирма В"
);

Передадим объект методу JSON.stringify()

document.write(JSON.stringify(oAuto));

и в результате работы этого небольшого кусочка кода будет выведена строка в формате JSON, которую можно передавать по любому адресу.

{"firm":"Audi","model":"A6","year":2008,
"price":78000,"sellers":["Фирма А","Фирма Б","Фирма В"]}

Предположим теперь, что эту самую строку мы получили в качестве ответа от сервера и ее надо преобразовать в объект JavaScript. Так нет ничего проще. Передаем строку методу JSON.parse()

var oAuto = JSON.parse(sAuto);

и получаем объект JavaScript.

Вы можете скачать исходный код примера, и испытать его на своем сайте.

Необходимо упомянуть также, что метод JSON.parse() может принимать опционально еще один параметр.

var myObject = JSON.parse(myJSONtext, filter);

Более полную информацию Вы всегда можете найти на сайте http://www.json.org/.

Мы вкратце познакомились с тем, как можно работать с данными в формате JSON на стороне клиента, а как обстоит дело при работе на стороне сервера? Оказывается существует довольно много программного обеспечения для работы с JSON в языках на которых пишутся серверные сценарии. JSON может применяться в Pyton, C#/.NET, PHP, ColdFusion, Perl, Java и т.д. Полный список можно найти на http://www.json.org/, а я для примера выбрал PHP, как наиболее близкий мне.

Утилита JSON-PHP написана Михалем Мигурски (Michal Migurski). Сама утилита – это один файл JSON.PHP, но для работы с утилитой требуется библиотека PEAR (PHP Extension and Application Repository). Скачать утилиту можно отсюда http://pear.php.net/pepr/pepr-proposal-show.php?id=198.

Если Ваш хостер не удосужился включить библиотеку PEAR – не расстраивайтесь. Вы вполне можете сделать все самостоятельно. Не обязательно даже иметь права администратора сервера. Я приведу ссылки. Кому очень понадобится – тот обязательно разберется.
http://pear.php.net/manual/en/installation.getting.php – см. раздел «PEAR in hosting environments».
В принципе нужно только получить инсталляционный файл, загрузить его на свой сервер, вызвать в адресной строке браузера и далее только следовать инструкциям.
А здесь посмотрите раздел «Динамическая коррекция пути к включаемым файлам».

Разберем все на примере. Пусть имеем такое определение класса (для PHP5)

class Auto {
  public $firm;
  public $model;
  public $year;
  public $price;
  public $sellers;

  function Auto($firm,$model,$year,$price) {
    $this->firm = $firm;
    $this->model = $model;
    $this->year = $year;
    $this->price = $price;
    $this->sellers = array();
  }
}

Используем этот класс так:

$oAuto = new Auto("Audi", "A6", 2008, 78000);
$oAuto->sellers[0] = "Фирма А";
$oAuto->sellers[1] = "Фирма Б";
$oAuto->sellers[2] = "Фирма В";

Теперь то, что нас интересует больше всего. Подключаем утилиту JSON-PHP, создаем новый экземпляр объекта Services_JSON и передаем объект $oAuto методу encode():

require_once("JSON.php");
$json = new Services_JSON();
$sJSONText = $json->encode($oAuto);

В результате переменная $sJSONText будет содержать строку в формате JSON:

{"firm":"Audi","model":"A6","year":2008,"price":78000,
"sellers":["\u0424\u0438\u0440\u043c\u0430 \u0410","\u0424\u0438\u0440\u043c\u0430 \u0411","\u0424\u0438\u0440\u043c\u0430 \u0412"]}

Здесь хочу обратить Ваше внимание на то, что утилита JSON-PHP понимает строки или в ASCII, или в UTF-8. Поэтому существенный выигрыш можно получить при использовании латинских символов, тогда как использование кириллицы в кодировке windows-1251 может привести к увеличению объема данных. Обратите внимание на то место в строке, где должны передаваться Фирма А, Фирма Б, Фирма В.

Но цели мы достигли – объект $oAuto готов к передаче в сценарий на языке JavaScript.

Разберем обратную операцию – преобразование строки текста в формате JSON в объект PHP. Все, что для этого нужно сделать, это передать строку методу decode():

$value = $json->decode($sJSONText);

Если теперь использовать например print_r(), то мы сможем убедиться, что объект был создан:

( [firm] => Audi [model] => A6
[year] => 2008 [price] => 78000
[sellers] => Array ( [0] => Фирма А [1] => Фирма Б [2] => Фирма В ) )

Все это есть в примере, который Вы сможете скачать. Пример включает и утилиту JSON-PHP. Естественно, Вам придется немного поправить пример в той части, где корректируются пути к библиотеке PEAR, либо удалить этот фрагмент кода, если библиотека у Вас уже подключена.

Архив с примером можно скачать здесь.

Что можно еще сказать? Разве что упомянуть о том, что утилита JSON-PHP не единственная для работы с JSON на стороне сервера. Существует расширение PHP – php-json (написано на C Омаром Килани (Omar Kilani)), однако для его установки потребуется умение устанавливать модули расширения PHP. Вот и все, пожалуй.

Буду рад, если найдете время для того, чтобы оставить свои отзывы…

Может я зайду издалека, но для того чтобы действительно понять JSON, сначала поймем (вспомним) синтаксис массивов и объектов в литеральной нотации JavaScript.

Массивы как литералы
Массив в JavaScript можно определить с помощью конструктора Array, например так:

var aData = new Array("строка", true, 43, null);

В JavaScript массивы нетипизированные, поэтому в них можно хранить различные типы данных. В примере массив содержит строку, логическое значение, число и значение null.

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

var aData = ["строка", true, 43, null];

Обращаться к отдельным элемента массива можно указывая имя массива и номер элемента:

alert(aData[0]);
alert(aData[1]);

Объекты как литералы
Объекты в JavaScript определяются с помощью конструктора Object, например так:

var oAuto = new Object();
oAuto.firm = "Audi";
oAuto.model = "A6";
oAuto.year = 2008;
oAuto.price = 78000;

Тот же самый код, но в литеральной нотации будет выглядеть так:

var oAuto = {
  "firm":"Audi",
  "model":"A6",
  "year":2008,
  "price":78000
};

Этот код создает объект со свойствами firm, model, year и price и обращаться к ним можно таким образом:

alert(oAuto.model);
alert(oAuto.year);

но можно использовать и синтаксис массивов обращаясь к свойствам объекта таким образом:

alert(oAuto["model"]);
alert(oAuto["year"]);

В литеральной нотации описания массивов и объектов можно вкладывать друг в друга, создавая таким образом объект массивов или массив объектов. Посмотрите этот код:

var aAuto = [
  {
    "firm":"BMW",
    "model":"X5",
    "year":2007,
    "price":99000
  },
  {
    "firm":"Audi",
    "model":"A6",
    "year":2008,
    "price":78000
  },
  {
    "firm":"Volkswagen",
    "model":"Touareg 7L",
    "year":2006,
    "price":45000
  }
];

Мы создали массив aAuto, который содержит три объекта. Комбинируя синтаксис обращения к массивам с синтаксисом обращения к объектам попробуем получить год выпуска второго автомобиля:

alert(aAuto[1].year); // получаем 2008

Можно сделать наоборот, и описать объект массивов:

var oAuto = {
  "firm":["BMW", "Audi", "Volkswagen"],
  "model":["X5", "A6", "Touareg 7L"],
  "year":[2007, 2008, 2006],
  "price":[99000, 78000, 45000]
};

в этом случае обращаемся сначала к объекту, а затем к массиву внутри него:

alert(oAuto.year[1]); // получаем 2008

Вот такое длинное получилось предисловие, но зато теперь будет гораздо понятнее при чем здесь вообще JSON…

JSON – комбинация массивов и объектов и предназначен только для хранения данных. Как следствие, JSON не может иметь переменных и не допускает никаких операций над ними. Давайте попробуем записать предыдущий пример, используя синтаксис JSON:

{
  "firm":["BMW", "Audi", "Volkswagen"],
  "model":["X5", "A6", "Touareg 7L"],
  "year":[2007, 2008, 2006],
  "price":[99000, 78000, 45000]
}

Обратите внимание, что пропали имя переменной и точка-запятая. Передача такого объекта с использованием HTTP-протокола будет происходить очень быстро, поскольку содержит минимум символов. Получив такие данные на стороне клиента и записав ее в какую-либо переменную (например sData) мы получаем строку информации.
Обратите внимание: именно строку, а совсем не объект или объект с вложенными в него массивами. Преобразуем строку в объект, используя функцию eval().

var oAuto = eval("(" + sData + ")");

В результате этого получится объект, который мы описали чуть выше.

Преимущество JSON перед XML
Так в чем же все-таки состоит преимущество JSON перед XML?

Здесь речь идет исключительно о преимуществах и недостатках только лишь с точки зрения организации обмена данными в Сети.

В том, что язык XML оказывается очень избыточным при сравнении с JSON. Давайте убедимся в этом на простом примере. Одни и те же данные представим в формате XML и в формате JSON.

<general>
  <cars>
    <car>
      <firm>BMW</firm>
      <model>X5</model>
      <year>2007</year>
      <price>99000</price>
    </car>
    <car>
      <firm>Audi</firm>
      <model>A6</model>
      <year>2008</year>
      <price>78000</price>
    </car>
    <car>
      <firm>Volkswagen</firm>
      <model>Touareg 7L</model>
      <year>2006</year>
      <price>45000</price>
    </car>
  </cars>
</general>

так это выглядит в формате XML, а ниже – в формате JSON:

{ "general":
  {
    "cars":[
      {
        "firm":"BMW",
        "model":"X5",
        "year":2007,
        "price":99000
      },
      {
        "firm":"Audi",
        "model":"A6",
        "year":2008,
        "price":78000
      },
      {
        "firm":"Volkswagen",
        "model":"Touareg 7L",
        "year":2006,
        "price":45000
      }
    ]
  }
}

При использовании формата JSON выигрыш составит 42 байта, а без учета пробелов и вовсе 86 байт. А если вспомнить еще и о том, что данные в формате JSON не требуют дополнительного синтаксического анализа на стороне клиента – преимущество JSON перед XML в аспекте передачи данных от сервера клиенту становится очевидным…

По этой теме могу порекомендовать прочитать переводную статью JSON и XML. Что лучше? на Хабрахабре, а я надеюсь, что мне удастся в ближайшем будущем подробнее рассказать о утилитах для работы с JSON как на стороне клиента, так и на стороне сервера.