| |
|
|
| | Здравствуйте!
Вот у меня есть такая задача:
Есть два списка select, для примера, пускай это будет список разделов и список категорий. Необходимо при выборе раздела (пункта в списке разделов), сформировать список категорий, принадлежащих данному разделу. Т.е. изначально список категорий пуст и на нем может быть написано "Сначала выберите раздел" и сам список disabled. Вот при событии onchange списка разделов я не знаю каким образом мне дальше действовать. Как изначально сформировать массив данных категорий и разделов, которые были бы связаны между собой. Помогите плз решить проблему. | |
| |
|
|
| |
|
|
| |
для: FireTiger
(04.07.2008 в 10:29)
| | | если наборы фиксированы, то создай два массива - разделов и категорий.
При выборе раздела его значение будет индексом двумерного массива категорий. скриптом формируешь селект из массива категорий с выбранным индексом.
если есть база, можно брать запросами из базы | |
| |
|
|
| |
|
|
| |
для: GeorgeIV
(04.07.2008 в 10:36)
| | | Т.е. нужно создать одномерный массив разделов и двумерный массив категорий примерно так:
categories[id_раздела][id_категории] = "Название категории";
|
а потом сформировать циклом select - это ясно. Но есть ли смысл формировать эти массивы, на php мне придется использовать цикл на формирования массива categories а потом еще один цикл на формирование самого select'a. Его нельзя никак объединить? чтобы не использовать два цикла (да и еще цикл на формирование разделов....). База есть, а что Вы имели ввиду "брать запросами из базы"? | |
| |
|
|
| |
|
|
| |
для: FireTiger
(04.07.2008 в 11:10)
| | | База имеется ввиду в том смысле, что не держать все массивы в скрипте а выбирать из базы. Первый запрос выберет сразу разделы и сформируешь первый селект. После выбора первого селекта его ID будет ключом для выбора категорий. Но в таком варианте аякс придется прикрутить. | |
| |
|
|
| |
|
|
| |
для: GeorgeIV
(04.07.2008 в 11:23)
| | | Так замечательно, намного выгодней... Значит алгоритм такой: выбираем из базы все разделы и формируем их список. Список категорий оставляем disable. При onchange списка разделов посылаем запрос на выборку категорий и точно также формируем список категорий. Понятно. А как вы посоветуете использовать ajax, взять библиотеку какую-нибуть? | |
| |
|
|
| |
|
|
| |
для: FireTiger
(04.07.2008 в 11:28)
| | | да я без библиотек обхожусь, вещь то простая. в соседней ветке простейший пример приведен, если с аяксом еще нет опыта | |
| |
|
|
| |
|
|
| |
для: GeorgeIV
(04.07.2008 в 11:40)
| | | а можно линк? | |
| |
|
|
| |
|
|
| |
для: FireTiger
(04.07.2008 в 11:43)
| | | Вверху смотришь ФорумPHP Вопрос ?вики система | |
| |
|
|
| |
|
|
| |
для: GeorgeIV
(04.07.2008 в 11:50)
| | | Спасибо, то что нужно! Когда сделаю скрипт - выложу | |
| |
|
|
| |
|
|
| |
для: FireTiger
(04.07.2008 в 11:57)
| | | Вот сделал что хотел. Очень бы вас попросил, чтобы вы попробовали код в действии и прокоментировали, правильно ли я пишу, все ли в порядке и нет ли чего лишнего. У меня на компе все прекрасно функционирует. Как для новичка в ajax тоже думаю будет интересно. Вот код:
Файл index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="">
<title>Test AJAX</title>
</head>
<body>
<script type="text/javascript" language="javascript">
// функция получения объекта XMLHttpRequest
function getXmlHttp(){
var req;
try {
req = new ActiveXObject("Msxml2.XMLHTTP"); // IE
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP"); // IE
} catch (E) {
req = false;
}
}
if (!req && typeof XMLHttpRequest!='undefined') {
if (req.overrideMimeType) {
req.overrideMimeType('text/xml'); // посылаем заголовок XML mime-type
}
req = new XMLHttpRequest(); // Mozilla, Safari, Opera, ...
}
return req;
}
var req = getXmlHttp(); // получаем объект XMLHttpRequest
// функция самого запроса к серверу
function makeRequest(url,container,params) {
if (!req) {
alert('AJAX not supported');
return false;
}
req.open('POST', url, true);
req.onreadystatechange = function() {
abortRequest = window.setTimeout("req.abort();", 5000);
if (req.readyState == 3 || req.readyState == 1) {
document.getElementById("loading").style.display = 'block';
}
if (req.readyState == 4) {
document.getElementById("loading").style.display = 'none';
clearTimeout(abortRequest);
if (req.status == 200) {
showData(container);
} else {
alert('С запросом возникла проблема. ' + req.statusText);
}
}
};
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
req.send(params);
}
// функция формирования параметров для получения категорий
function getCategories(container) {
var idSection = event.srcElement.value;
var params = 'idSection='+idSection+'&doajax=getCategories';
makeRequest('ajax.php',container,params);
}
// функция показа результата запроса
function showData(container) {
if(req.responseText != ''){
document.getElementById(container).innerHTML = req.responseText;
document.getElementById(container).disabled = false;
} else {
document.getElementById(container).innerHTML = '<option value="0">- Сначала выберите раздел -</option>';
document.getElementById(container).disabled = true;
}
}
</script>
<div id="loading" style="position:absolute; top:40%; left:40%; display: none; width: 250px; font-family: Verdana; font-size: 11pt; border: 1px solid #BBBBBB; background: #EEEEEE; padding: 5px 5px 5px 5px;">Загрузка данных. Подождите...</div>
<select name="sectionId" id="sectionId" onchange="getCategories('catId')">
<option value="0">- Выберите раздел -</option>
<option value="1" >Первый раздел</option>
<option value="2" >Второй раздел</option>
<option value="3" >Третий раздел</option>
<option value="4" >Четвертый раздел</option>
<option value="5" >Пятый раздел</option>
</select>
<br>
<select name="catId" id="catId" disabled="true">
<option value="0">- Сначала выберите раздел -</option>
</select>
</body>
</html>
|
Файл ajax.php:
<?php
header("Content-type: text/html; charset=utf-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
$doAjax = $_POST["doajax"];
$idSection = $_POST["idSection"];
if ($idSection != 0) {
// тут дальше можно написать запрос на выборку категорий с idSection=$idSection
// а так, для легкости примера, просто вручную формируем список категорий
switch ($doAjax) {
case "getCategories":
echo "<option value=1>Первая категория</option><option value=1>Вторая категория</option>";
break;
}
}
?>
|
| |
| |
|
|
| |
|
|
| |
для: FireTiger
(05.07.2008 в 01:03)
| | | Я заметил, что в IE свойство innerHTML плохо отрабатывает... Почему-что option не формируется, то текст возвращается правильный... | |
| |
|
|
| |
|
|
| |
для: FireTiger
(05.07.2008 в 12:03)
| | | И все-таки, все ли сдесь хорошо? У меня только в IE глючит, а исправить незнаю как... Хелп. | |
| |
|
|
