BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Все про HTML » Скрипт для выпадающего списка

Скрипт для выпадающего списка

2017-09-11 / Вр:23:39 / просмотров: 8007

Всем привет!
Решил сегодня выложить маленький, готовый скрипт для выпадающего списка.
В чем же заключается сама фишка скрипта? В том, что при выборе пункта из списка, меняется соответствующая картинка. Вот, например, из списка выбираете пункт «metallica» и появляется соответствующая картинка группы.
Я думаю, вы найдете хорошее применение этого скрипта у себя на сайте.
Итак, сам код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>скрипт на блоге BlogGood.ru</title>
</head>
<body>
<div>
<select onchange="document.getElementById('image').src=this.value">
<option value="metallica.jpg">Metallica</option>
<option value="pod.jpg">P.O.D.</option>
<option value="type-o-negative.png">Type o negative</option>
<option value="helloween.png">helloween</option>
</select>
</div>
<br>
<div class="image"><img id="image" src="metallica.jpg" alt=""></div>
</body>
</html>

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

Результат скрипта можете посмотреть вот тут:

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

3 Ответов на комментарий - Скрипт для выпадающего списка

  1. Юрий

    Полезная штука. А как сделать, чтобы по умолчанию в поле стояла какая-нибудь надпись. И чтобы при выборе какого-нибудь пункта происходил переход по ссылке в этом пункте.

  2. Avatar photo Степан => автор блога

    Не знаю, Юрий, правильно ли я Вас понял, вот готовый скрипт:

    <select onchange="top.location.href = this.options[this.selectedIndex].value;">
      <option selected value="#">Выберите из списка</option>
      <option value="/">на блог - bloggood</option>
      <option value="http://stepkinblog.ru/">на блог - stepkinblog</option>
      <option value="/poleznye-stati/kak-nastroit-bios-noutbuk-dell-inspiron-15.html/">Как настроить BIOS</option>
     </select>
    
  3. Рушан

    Здравствуйте!А не могли бы подсказать. как сделать чтобы каждая картинка выпадающего списка была бы ссылкой?

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716