Консультации Портала - Консультация #156372

Задать вопрос Консультации Пользователи Форум

Задать вопрос экспертам

Консультация № 156372

31.12.2008, 17:19

50.00 руб.

0 2 1

Компьютеры Программирование

Здравствуйте.
У меня следующий вопрос:
Мне необходимо именно с использованием библиотеки JsHttpRequest (сайт http://dklab.ru/lib/JsHttpRequest)
сделать следующее :
есть 2-а списка select ,- 1-й список это марки авто.
<select size="1" id='car' name="car"> <option value='1'>ВАЗ</option ><option value='2'>Опель</option ><option value='1'>Тойта</option ></select >
второй список это модели авто. он пока не активный и установлен в положение "любая" <select size="1" id='model' name="model"><option value='1'>любая</option ></select>
при выборе какого либо значения из первого списка, например ВАЗ, - идёт обращение к базе данных(c использованием библиотеки JsHttpRequest ) и выбираются все модели ВАЗ и после получения ответа сервера второй список (который был не активным readonly)становится активным и принимает вид <select size="1" id='model' name="model"> <option value='1'>любая</option ><option value='2'>Калина</option ><option value='3'>Приора</option ></select >
Всё это происходит без перезагрузки страницы.
Мне необходим код реализации этих действий с комментариями.
Спасибо.
p.s. Если Вам ,что либо не ясно в постановке задачи пожалуйста уточните у меня.

Обсуждение

Неизвестный

31.12.2008, 17:30

общий

обращение к базе данных происходит с использованием php

Неизвестный

31.12.2008, 19:47

общий

это ответ

Здравствуйте, Dima1967!
Прежде всего давайте определимся с общей схемой работы такой связки (это будет полезно на тот случай, если что-то будет непонятно в моей реализации).
1) при выборе значения в 1-ом списке, мы посылаем соответствующее значение серверному скрипту.
2) Серверный скрипт обращается к базе данных и выбирает из таблицы моделей для соответствующей марки машины массив моделей со значением ее "родительской" марки, равным $_REQUEST['car']. Данный массив мы перекодируем в JSON, и возвращаем клиенту.
3) JSON - отличный формат для передачи данных от сервера клиенту, потому что не требуется каких-либо дополнительных действий по перекодировке полученных данных. Мы получаем готовый объект Javascript. В цикле for - in значения свойств этого объекта перебираются и вставляются во второй вываливающийся список.

Глава 1. Хранение данных.
Предполагаем, что данные о моделях машин хранятся в таблице car_models следующего вида

model_id - идентификатор модели машины(первичный ключ таблицы, автоинкрементное поле)
car_id - идентификатор марки машины
model_name - имя модели

Как при этом хранятся данные о марках машин - не суть важно, главное, чтобы у такой таблицы был первичный автоинкрементный ключ. Если в таблице марок машин ВАЗ имеет номер 1, то в таблице моделей 2105, 2107, 2109 и т. д. имели car_id = 1.

Глава 2. Серверный скрипт.
require_once "JsHttpRequest.php";
$js = &new JsHttpRequest.php('windows.1251');
$query = sprintf("SELECT `model_id`, `model_name` FROM car_models WHERE `car_id` = '%s';", $_REQUEST['car']);
$result = mysql_query($query);
$rows = mysql_fetch_array($result);
global $_RESULT;
$_RESULT = $rows;

Глава 3. Клиентская часть.
В результате продолжительного тестирования и разбирательства с библиотекой JsHttpRequest получилось нечто следующее(в приложении).

С первого раза при переносе, скорее всего, не заработает, но Вы должны убедиться перед запуском, что скрипты "видят" подключаемые библиотеки (JsHttpRequest.php и JsHttpRequest.js), что на серверный скрипт приходит какое-либо значение, что к базе данных Вы подключаетесь успешно.
Если вдруг что-то неясно, спрашивайте через личку, с удовольствием отвечу.
С уважением, Товарищ Бородин

Приложение:
...
<script type="text/javascript" src="JsHttpRequest.js">
</script>
<script type="text/javascript">
function getModel(value)
{
JsHttpRequest.query(
// адрес скрипта
'script.php',
// передаваемые данные
{
'car':value
},
// функция обратного вызова, которая и подставляет полученные данные во второй список
function (result, errors){
document.getElementById('model').disabled = false;
for (i in result)
{
var opt = new Option(result[i].model_name, result[i].model_id);
document.forms[0].model.options[i] = opt;
}
},
// говорим "не кэшировать!" :)
true
);
}
</script>
</head>

<body>
<form method="post" action="" onsubmit="return false;">
<select name="car" id="car" onchange="return getModel(parseInt(this.value));">

</select>
<select name="model" id="model">
</select>
</form>
</body>
</html>

Форма ответа

Отправка постов/ответов доступна только зарегистрированным и подтвержденным пользователям.

Если Вы уже зарегистрированы на Портале - войдите в систему, если Вы еще не регистрировались - пройдите простую процедуру регистрации.