/**
 * @author Evgeni Lezhenkin evgeni@lezhenkin.ru http://lezhenkin.ru
 *
 * В данном сценарии мы будем обрабатывать события выбора значений
 * в списках тега select. Второе и третье поле списка являются зависимыми.
 * При выборе значения в первом поле select должен отправляться AJAX-запрос,
 * который вернет перечень значений для второго списка. Далее эти значения будут
 * помещены во второй select, а сам список станет активным.
 * После выбора значения во втором списке запускается тот же алгоритм, что описан
 * выше.
 *
 * Все AJAX-запросы к серверу будут выполняться через скрипт query.php методом POST
 *
 * Если пользователь меняет значение в первом списке, все поля второго
 * и третьего удаляются, и второй и третий списки становятся неакивными. Если
 * Меняется значение второго списка, то удаляются все значения для третьего,
 * и он становится неактивным.
 *
 * Данный сценарий будет работать во всех броузерах благодаря библеотеке jQuery
 *
 * Здесь не будет описываться синтаксис самого jQuery, синтаксис JavaScript. Также
 * здесь не будет подробно описываться инструментарий
 */
// Используем немедленно вызываемую функцию
(function () {
    // Будем работать в соответствии с требованиями современного стандарта
    // ECMAScript. Включим строгий режим.
    "use strict";

    // Весь наш основной сценарий будет работать уже после загрузки документа
    jQuery(function () {
        // Пишем обработчик события для выбора значения в первом списке
        // Нас интересует событие изменения значения поля
        $( '#type' ).change(function () {
            // При изменении значения первого списка мы должны удалить
            // все имеющиеся значения во втором и третьем, а также
            // сделать их неактивными
            $( '#kind, #category' ).find( 'option:not(:first)' )    // Ищем все теги option, не являющиеся тегом по умолчанию
                .remove()   // Удаляем эти теги
                // Чтобы сделать поля неактивными, неправильно менять значение атрибута disabled
                // Теперь нам нужно изменять значение свойства disabled объектов полей списка,
                // так как мы работаем с ними через библиотеку jQuery
                .end()      // Возвращаемся к исходному объекту
                .prop( 'disabled',true );       // Делаем поля неактивными
            // Сохраним выбранное значение списка в переменную
            var type_id = $( this ).val();
            // Если выбрано значение по умолчанию, ничего не делаем
            if (type_id == 0) { return; }
            // В ином случае нам необходимо отправить запрос на сервер
            // AJAX-запрос к серверу мы выполним, используя метод jQuery ajax()
            $.ajax({
                type: "POST",   // Тип запроса
                url: "query.php",   // Путь к сценарию, обработающему запрос
                dataType: "json",   // Тип данных, в которых сервер должен прислать ответ
                data: "query=getKinds&type_id=" + type_id,  // Строка POST-запроса
                error: function () {    // Обработчик, который будет запущен в случае неудачного запроса
                    alert( "При выполнении запроса произошла ошибка :(" );   // Сообщение о неудачном запросе
                },
                success: function ( data ) { // Обработчик, который будет запущен после успешного запроса
                    // В ответ на наш запрос сервер должен прислать массив значений
                    // Мы его вставим в поле второго списка с помощью цикла for
                    for ( var i = 0; i < data.length; i++ ) {
                        // Каждое полученное значение вставим в список видов транспорта
                        $( '#kind' ).append( '<option value="' + data[i].kind_id + '">' + data[i].kind + '</option>' );
                    }
                    // После того, как мы сформировали список, мы можем сделать его активным
                    // обратившись к его свойству disabled
                    $( '#kind' ).prop( 'disabled', false ); // Включаем поле
                }
            });
        });

        // Пишем обработчик события для выбора значения во втором списке
        // Нас интересует событие изменения значения поля
        $( '#kind' ).change(function () {
            // При изменении значения второго списка мы должны удалить
            // все имеющиеся значения в третьем, а также
            // сделать его неактивными
            $( '#category' ).find( 'option:not(:first)' )   // Ищем все теги option, не являющиеся тегом по умолчанию
                .remove()   // Удаляем эти теги
                // Чтобы сделать поле неактивным, неправильно менять значение атрибута disabled
                // Теперь нам нужно изменять значение свойства disabled объекта поля списка,
                // так как мы работаем с ним через библиотеку jQuery
                .end()      // Возвращаемся к исходному объекту
                .prop( 'disabled',true );       // Делаем поле неактивным
            // Сохраним выбранное значение списка в переменную
            var kind_id = $( this ).val();
            // Сохраним выбранное значение типа транспорта в переменную
            var type_id = $( '#type' ).val();
            // Если выбрано значение по умолчанию, ничего не делаем
            if (type_id === 0) { return; }
            // В ином случае нам необходимо отправить запрос на сервер
            // AJAX-запрос к серверу мы выполним, используя метод jQuery ajax()
            $.ajax({
                type: "POST",   // Тип запроса
                url: "query.php",   // Путь к сценарию, обработающему запрос
                dataType: "json",   // Тип данных, в которых сервер должен прислать ответ
                data: "query=getCategories&type_id=" + type_id + "&kind_id=" + kind_id, // Строка POST-запроса
                error: function () {    // Обработчик, который будет запущен в случае неудачного запроса
                    alert( "При выполнении запроса произошла ошибка :(" );   // Сообщение о неудачном запросе
                },
                success: function ( data ) { // Обработчик, который будет запущен после успешного запроса
                    // В ответ на наш запрос сервер должен прислать массив значений
                    // Мы его вставим в поле третьего списка с помощью цикла for
                    for ( var i = 0; i < data.length; i++ ) {
                        // Каждое полученное значение вставим в список категорий транспорта
                        $( '#category' ).append( '<option value="' + data[i].category_id + '">' + data[i].category + '</option>' );
                    }
                    // После того, как мы сформировали список, мы можем сделать его активным
                    // обратившись к его свойству disabled
                    $( '#category' ).prop( 'disabled', false ); // Включаем поле
                }
            });
        });

        // Никакие обработчичик для поля третьего списка не нужны
    }); // Функция ожидания загрузки документа jQuery
})(); // Немедленно вызываемая функция
/**
 * Вы должны понимать, что данный код далек от идеала и является лишь
 * примером решения конкретной задачи — динамического пополнения полей
 * формы select. Здесь опущено очень много моментов, связанных с отладкой,
 * безопасностью и многим другим. И вы должны понимать это очень хорошо.
 * Данный пример просто показывает инструмент, с помощью которого решается
 * озвученная задача.
 */