Делаем выпадающие списки из элементов инфоблока Битрикс

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

Задача: разделы — это группа (тематика ссылок) для быстрого перехода, элементы — сами ссылки.

Решение:
Немного поправить шаблон вывода, добавить стили (плагин для стилизации элементов веб-форм скачан с интернета) и простенький javascript для перехода из выпадающего списка.
Стандартным битриксовым компонентом bitrix:catalog.sections.top выводим разделы инфоблока. В инфоблоке название — это пункт выпадающего списка, а урл для перехода — добавленное свойство инфоблока, тип «Строка», имя свойства «url».
Поправим шаблон компонента, чтобы отобразить вывод списками (скрипт для перехода в самом начале шаблона, выделено курсивом):
list

<?if(!defined(«B_PROLOG_INCLUDED») || B_PROLOG_INCLUDED!==true)die();?>
<SCRIPT LANGUAGE=»JavaScript» TYPE=»text/javascript»>
<!—
function JumpToIt(list)
{
var selection = list.options[list.selectedIndex].value
if (selection != «None»)
location.href = selection
}
//—>
</SCRIPT>
<div class=»rapid_outlist_jquery»>
<?foreach($arResult[«SECTIONS»] as $arSection):?>
<form>
<select onChange=»JumpToIt(this)»><option VALUE=»None»><?=$arSection[«NAME»]?></option>
<?foreach($arSection[«ITEMS»] as $arElement):?>
<option VALUE=»<?=$arElement[«PROPERTIES»][«url»][«VALUE»]?>»><?=$arElement[«NAME»]?></option>
<?endforeach;?>
</select>
</form>
<?endforeach?>
</div>

Понравилась моя запись?
Кликни по рекламному баннеру ниже. Тебе бесплатно и не сложно, а мне - честный заработок блогом и приятное дополнение к энтузиазму на чашку кофе :-)