Всем привет, друзья. Надеюсь, этот блог не станет заложником одной сферы деятельности — программирования. Ведь я занимаюсь не только кодингом, но и кучей других, не менее интересных, вещей, но о них напишу позже. Пока же о кодинге: недавно я столкнулся с вопросом, как сделать красивый и удобный выпадающий список без дополнительных плагинов и мне захотелось написать его самостоятельно. Уверен, в сети вы найдете много вариаций на эту тему, но мне было лень копаться, да и лезть в чужой код не самое большое удовольствие, а вот настроить список под себя нужно. Поэтому сегодя я хочу предложить вам урок по созданию выпадающего списка с использованием jQuery + CSS. Кроме того, сделанный настолько просто, насколько это возможно, чтобы во всем было легко разобраться.

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

Задача

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

Для начала подключим библиотеку jQuery. Если она у вас уже подключена, этот шаг можно пропустить.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Далее подключим файл со скриптом, в который мы и включим нужные нам функции обработки объектов.Назовем его, к примеру, dropdown.js.

<script src="/js/dropdown.js"></script>

Сам список мы сделаем, для удобства и правильности, в виде ненумерованного списка типа ul с вложенными элементами li. Ну, кому я буду рассказывать, вы и сами знаете. Текст, который будет появляться после выбора города, мы укажем в атрибутах для элементов списка. Например, alt, хотя можно использовать более правильный вариант с указанием идентификатора. Но я не люблю мусорить в dom’е, поэтому используем все же alt. Наш список будет выглядеть так:

<div class="delivery_block">
<ul class="cities_list">
	<li>Москва</li>
	<li>Санкт-Петербург</li>
	<li>Нижний Новгород</li>
	<li>Казань</li>
	<li>Ростов-на-Дону</li>
	<li>Волгоград</li>
	<li>Краснодар</li>
	<li>Саратов</li>
	<li>Самара</li>
	<li>Екатеринбург</li>
	<li>Челябинск</li>
	<li>Омск</li>
	<li>Новосибирск</li>
	<li>Красноярск</li>
	<li>Пермь</li>
	<li>Уфа</li>
</ul>
</div>
<div class="delivery_list">
<div id="btn"></div>
Москва
<div class="delivery_text">Самовывоз из офиса или курьером, Дмитровское шоссе, 9-а, стр. 5, 12:00—20:00</div>
</div>

Далее лезем в CSS, в свою таблицу стилей добавляйте следующее:

.delivery_block{
 width: 270px;
 padding: 24px 0 0;
 color: #8c8c8c;
 font-size: 11px;
 }
 .delivery_block .delivery_list {
 padding: 3px 6px 0 6px;
 height: 22px;
 cursor: pointer;
 border-radius: 4px;
 margin: 0 20px 0 0;
 color: #ed4226;
 border: 1px solid #efefef;
 width: 237px;
 z-index: 11;
 background: #fcfcfc;
 }
 .delivery_list #btn {
 background: url(dropdown.png);
 width: 17px;
 height: 18px;
 float: right;
 }
 .delivery_list span {
 padding: 2px 0 0 2px;
 display: block;
 font-weight: bold;
 }
 .delivery_block ul.cities_list {
 margin-top: 0px;
 z-index: 10;
 background: #fcfcfc;
 position: absolute;
 border-radius: 3px;
 width: 249px;
 padding: 0;
 border: 1px solid #eee;
 display: none;
 }
 ul.cities_list li {
 padding: 6px 9px;
 list-style-type: none;
 border-top: 1px solid #efefef;
 }
 ul.cities_list li:hover {
 cursor: pointer;
 background: #fff;
 }
 .delivery_block .delivery_text {
 padding: 3px 5px;
 margin: 5px 0 0 3px;
 }

В результате имеем блок и список, который до поры, до времени не виден. Дальше идем в dropdown.js и пишем туда следующее:

$(function(){
 /* выбор города */
 $('.delivery_list').click(function(){
 $(".cities_list").slideToggle('fast');
 });
 $('ul.cities_list li').click(function(){
 var tx = $(this).html();
 var tv = $(this).attr('alt');
 $(".cities_list").slideUp('fast');
 $(".delivery_list span").html(tx);
 $(".delivery_text").html(tv);
 });
 })

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

Количество пунктов в выпадающем списке может быть любым, а в атрибуте alt можно указывать любой текст, в том числе и html за исключением двойных кавычек.

Посмотреть и скачать

    Отправить ответ

    31 Комментарий на "Урок: создание выпадающего списка на js+css"

    Уведомлять
    avatar
    5000
    Евгений
    Гость

    Решение по закрытию списка вне области.
    $(document).on(‘click’, function(e) {
    if (!$(e.target).closest(“.delivery_block”).length) {
    $(‘.cities_list’).slideUp(‘fast’);
    }
    e.stopPropagation();
    });

    Евгений
    Гость

    Почему то активно игнорировался вопрос “чтобы список скрывался по клику вне его области?” У меня тоже такой вопрос возник. Ответа не последовало. В таком случае придется использовать bootstrap

    LuckyRuS
    Гость

    Доброго времени суток! Спасибо за список! Настроил без проблем, но вот возникла необходимость использовать LocalStorage или же использовать cookie, чтобы запоминался выбор пользователя. Как быть в данном случае?

    Евгений
    Гость

    Здравствуйте! Подскажите пожалуйста вариант скрипта вместо alt и li выборка div?

    asd
    Гость

    ау . что никто не знает? как сделать закрытие выпадающего блока.. при клике вне его области..

    Илий
    Гость

    Можно создать обработчик события, слушающий всю страницу, и написать логику 1)для клика вне области списка (просто закрытие блока) и 2)клика по элементу из списка.

    asd
    Гость

    как сделать закрытие выпадающего блока.. при клике вне его области..

    Роман
    Гость

    Привет! Обязательно ли лепить к ссылке jquery integrity="sh34- и т.д. и что она дает

    Андрей
    Гость

    Добрый день!
    Можете подсказать, как добавить к Вашему замечательному скрипту перед выбором города – выбор области?

    Андрей
    Гость

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

    Влад
    Гость

    Добрый день!
    Можно ссылку на полную версию?! Скачать целиком негде?
    Не хватает мозга разобраться по инструкции… (((
    Заранее благодарен!

    Мотвей
    Гость

    Здравствуйте, Назар! Спасибо за скрипт, очень пригодился. В Jquery относительно недавно, не подскажете как сделать чтобы список скрывался по клику вне его области? Спасибо!

    диляр
    Гость

    а как сделать чтобы alt="пр. Ленина 12-а, 9:00—18:00" вместо текста поставить какой нибудь html код

    Юлиана
    Гость

    подскажите, а почему может не отображаться список ul? скрипт работает, display: block встает у списка, а список не отображается

    Twindragon
    Гость

    Спасибо большущее за решение! Как приятно найти готовое и работающее))

    Вячеслав
    Гость

    А как скачать данные скрипт.

    Дмитрий
    Гость

    Настроил Ваш скрипт минут за 20, полностью его видоизменив. На другие убивал по целому дню и результата 0.

    Бро, СПАСИБИЩЕтебе))

    Loco
    Гость

    Loco любит шашечки ;)

    Loco
    Гость

    Назарище, у тебя в демо meta charset не прописан ;)

    Красивая девушка
    Гость

    Спасибо, хоть немного разобралась в дебрях js

    wpDiscuz