0

Подскажите пожалуйста, как можно реализовать такую схему. Допустим у нас есть структура сайта с большой вложенностью. Мы делаем меню выпадающее на основе select'ов:

<select>
    <option>Пункт 1</option>
    <option>Пункт 2</option>
</select>

в который выводим список родительских страниц. При выборе человеком одного из пунктов появляется дополнительно дроп-меню со списком дочерних страниц и т.д. Т.е. в завистимости от вложенности, может появляться и 4, и 5 выпадающих списков рядом друг с другом.

Как генерить список дочерних страниц на php я знаю, но как сделать это все на аяксе или jQuery (имею в виду передачу параметров и вывод новых меню) - загадка. Примеры, которые находил, позволяют использовать только одно меню дополниительное и то, которое сразу выведено вместе с основным, просто неактивно.

Буду очень признателен за надодки и хорошие понятные примеры. Спасибо!

3 ответа 3

1

основной файл:

<script type="text/javascript">
function setLevel(lvl) { // вспомогательная функция
  var n = lvl;
  while ($('#reclist-lvl'+n).get(0)) {
    $('#reclist-lvl'+n).remove();
    n++;
  } // удаляем все глубже текущего уровня
  $('#reclist').append('<div id="reclist-lvl'+n+'">загрузка</div>');
}
$(document).ready(function() {
  setLevel(1);
  $.get('/getlist.php?pid=0&lvl=1', function(data) { $('#reclist-lvl1').html(data); });
});
</script>
<div id="reclist"></div>

getlist.php

<?
$pid = (int)@$_GET['pid'];
$lvl = (int)@$_GET['lvl'];
// получаем список родительских элементов $cats
echo '<select onchange="setLevel('.($lvl+1).');$.get(\'/getlist.php?pid=\'+this.value+\'&lvl='.($lvl+1).'\', function(data) { $(\'#reclist-lvl'.($lvl+1).'\').html(data); });">';
foreach ($cats as $cat)
  echo '<option value="'.$cat->id.'">'.$cat->name.'</option>';
echo '</select>';
?>

Что-то вроде. Не тестил, могут быть косяки, если что непонятно в коде - в каменты.

3
  • Я так понял что в getlist.php нужно еще добавить перед перебором формирование массива в зависимости от переданного в файл айди, так? Но чет не работает, а в Java Script я полный ноль... (( 6 фев 2012 в 14:54
  • я ж там специально комментарий вывел, что да, нужно получить список(массив) элементов. в основном файле должен быть подключен jquery, а от вас еще бы список ошибок не помешал (ctrl+shift+j в фаерфоксе). Ибо что конкретно у вас не работает, я угадать не смогу)
    – Sh4dow
    6 фев 2012 в 16:42
  • позанудствую: нерерировать и гонять целый кусок html вместо строчки данных из php не кашерно, вешать обработчики прямо на элемент селекта также считается не очень хорошей практикой. Потом сам ногу сломаешь пока найдешь где и что если селекты менять нужно будет, какой-нибудь css класс повесить, в js поменять что-либо. Получилось - лишь бы заработало, а ля Joomla
    – zippp
    2 ноя 2013 в 11:29
0

динамический select JQuery

0

каждому из пунктов списка добавте значение id этого пункта в базе данных

<select>
    <option value="1">Пункт 1</option>
    <option value="2">Пункт 2</option>
</select>

при выборе любого пункта отсылаем ajax запрос с id выбранного пункта, на основе которого сделайте выборку из БД и получите список дочерних элементов

$('select').on('click', 'option', function(){
    $.get('путь к скрипту php', {'id': $(this).val(), function(data){
        // получаем data вида {5: 'Пункт 5', 6: 'Пункт 6', 7: 'Пункт 7'} 
        // структуру массива нужно сформировать на сервере
        // на основе данных строим новый селект
        var sel = buildSelect(data);
        $('селектор контейнера всех селектов').append(sel);
    }, 'json');
});

функция, которая собирает элемент select на основе json данных

function buildSelect(json){
    var selEl = $('<select>');
    $.each(json, function(id, label){
        $('<option>').val(id).text(label).appendTo(selEl);
    };
    return selEl;
}

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.