Главная » Языки программирования

Select html как ссылка

На чтение 4 мин
Содержание
  1. Select option с ссылками
  2. JS
  3. Пример:
  4. JQuery
  5. Пример:
  6. C использованием атрибута data
  7. Пример:
  8. Имитация селекта
  9. HTML-разметка:
  10. CSS:
  11. JQuery:
  12. Переход при выборе пункта из выпадающего списка
  13. 3 Comments
  14. Добавить комментарий Отменить ответ
  15. Свежие записи
  16. Свежие комментарии
  17. Метки
  18. Друзья
  19. Как сделать ссылку в элементе списка select?
  20. Как при выборе select и нажатии на кнопку перейти на нужную ссылку?
  21. Select с option ссылкой
  22. Решение

Select option с ссылками

По спецификации HTML в нельзя вставить ссылку, если все-таки её туда вставить, то работать она не будет. В таких случаях можно сделать перенаправление браузера по клику на JS или имитацию селекта другими элементами.

JS

Пример:

JQuery

Пример:

C использованием атрибута data

Пример:

Имитация селекта

В целях SEO-перелинковки, в коде страницы должны находится ссылки , в таком случаи можно имитировать другими элементами.

HTML-разметка:

CSS:

.selectlink < position: relative; display: inline-block; width: 200px; text-align: left; margin: 10px; >.selectlink-control < position: relative; padding: 10px 15px; border: 1px solid #dcdfe6; border-radius: 4px; background: #fff; cursor: pointer; >.selectlink-control:after < content: ''; border: 5px solid transparent; border-top: 5px solid #999; position: absolute; top: 50%; right: 15px; margin-top: -3px; >.selectlink ul < display: none; box-sizing: border-box; margin: 0; padding: 0; width: 100%; height: auto; max-height: 200px; position: absolute; top: 100%; left: 0px; border: 1px solid #dadada; border-top: none; background: #fff; z-index: 9999; overflow: auto; user-select: none; >.selectlink li < display: block; margin: 0; padding: 0; >.selectlink li a < position: relative; display: block; margin: 0; padding: 4px 6px 4px 15px; font-weight: normal; font-size: 1em; line-height: 1.1; cursor: pointer; text-decoration: none; color: #333; >.selectlink li a:hover < background: #03a2ff; color: #fff; >@media screen and (max-width: 700px) < .body_pointer < cursor: pointer; >>

Т.к. на мобильных устройствах событие «click» срабатывает только у элементов со свойством cursor: pointer , в коде реализована возможность закрыть выпадающее меню по клику вне области селекта (добавлением класса «body_pointer» к ).

JQuery:

$(function() < $(".selectlink-control").click(function()< var $menu_popup = $(this).next(); $menu_popup.slideToggle(200, function()< $('.selectlink ul').not($menu_popup).slideUp(200); if ($menu_popup.is(':hidden')) < $('body').removeClass('body_pointer'); >else < $('body').addClass('body_pointer'); >>); return false; >); $(document).on('click', function(e) < if (!$(e.target).closest('.selectlink').length)< $('body').removeClass('body_pointer'); $('.selectlink ul').slideUp(200); >>); >);

Источник

Переход при выборе пункта из выпадающего списка

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

Нижеприведенный способ отлично подходит для создания элемента навигации по сайту или же как способ выбора альтернативной языковой/географической версии сайта.

В начале вставим в код страницы скрипт, написанный на языке JavaScript, который будет отвечать за переход.

Читайте также:  Which php version is best

В третьей сточке у нас указывается имя функции («linklist» в данном случае), которое можно задать произвольно, главное чтобы не странице не существовало ещё одной функции с таким же именем.

Далее вставляем сам код выпадающего списка.

Имя формы () и имя списка () указываются произвольными, главное чтобы были уникальными. Самое важное — не напутать их в параметрах вызова нашей функции перехода. Прописывается вызов в атрибутах списка (вторая строчка):

onChange=»имя_функции(document.имя_формы.имя_списка)»

В нашем случае onChange=»linklist(document.menu.sel)»

Если прописать тэгу элемента ()списка атрибут target=»new», то ссылка будет открываться в новом окне (пятая строчка).

В атрибуте title=»…» указываем всплывающую подсказку для ссылки (точно так же, как для тэга ).

Так же можно сделать, чтобы переход по ссылке осуществлялся не сразу, а после нажатия кнопки. Скрипт остается тем же самым:

А в коде списка меняем событие OnChange на OnClick

Ну и конечно же смотрим, чтобы на одной странице не было функций, форм и списков с одинаковыми именами.

И ещё, визуальные редакторы Joomla режут JavaSrcipt, по этому необходимо сохранять материал с этим списком в режиме «Без редактора».

3 Comments

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

Посмотрите, вы этот вариант имеете в виду, который я реализовал на этом сайте http://elticon.ru/produkciya/ ?

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Свежие записи

Свежие комментарии

  • Николай Короткин к записи Ошибка часов: не открываются сайты в Chrome и Opera
  • Paul к записи Ошибка часов: не открываются сайты в Chrome и Opera
  • Пробел к записи Ошибка часов: не открываются сайты в Chrome и Opera
  • Николай Короткин к записи Как настроить планировщик задач на перезагрузку компьютера каждую ночь
  • Нафиг не нужно к записи Как настроить планировщик задач на перезагрузку компьютера каждую ночь

Метки

Друзья

Источник

Как сделать ссылку в элементе списка select?

Как сделать в нём переход по ссылке или подскажите альтернативу? Href не пашет, в value тоже не пашет. Как то обрабатывать надо?

In4in

document.querySelector(".minimenu").onchange = function()

In4in

In4in

Возьмем хотя бы мобильную версию гугла. Никакого JS — только ссылки и простая форма (поле ввода + кнопка).

Не нужно целиком отказываться от JS, он просто не должен отвечать за функционал на столько, что у пользователей, у которых отключен/неподдерживается, вызовет проблемы. То есть, для них должен быть «аналоговый» метод выполнения того или иного действия.

В вашем случае, следует использовать обычные ссылки и если так уж принципиально, то при загрузке страницы заменять блок меню на select с помощью JavaScript (т.е, селект будет использовать только у тех, у кого работает js).

Читайте также:  Read bin file php

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

Источник

Как при выборе select и нажатии на кнопку перейти на нужную ссылку?

Как при помощи вот такой формы , и выборе елемента перейти на нужную ссылку?

webinar

darkleviathan

webinar

KazeZlat

Смотря на ссылки какого вида вы хотите переходить. Можно назначить каждому

Если хотите переходить по ссылкам без GET-параметров (так называемая «статика») — нужно писать свой обработчик отправки формы или просто сделать ссылки ( ) в виде выпадающего списка.

darkleviathan

Если с Get тогда выводить так?

KazeZlat

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

Источник

Select с option ссылкой

Возможно ли в option как то ссылку пропихнуть или сам option сделать переходом на другую html страницу?

Вывод ссылки из выбранного option в select
Подскажите пожалуйста, как лучше всего реализовать вывод ссылки, при выборе определенного option.

Выбрать option в select при выборе другого option в другом select
Всем добрый привет! Подскажите, пожалуйста, как реализовать вот какую штуку: необходимо, чтобы.

html select\ multi select option одним кликом
Здравствуйте помогите реализовать такую штуку допустим есть html select список . Нужно сделать так.

Select — option
Добрый день! Подскажите пожалуйста, как сделать так чтобы при выборе какого-либо элемента из.

Только лишь с помощью html это не реалуемо, понадобится аж полторы строчки js:

select> option value="1.html">1/option> option value="2.html">2/option> option value="3.html">3/option> /select>
document.querySelector('select').onchange = function(){ window.location = this.value }

Joey, да js устроит вполне, сам селект с картинками wSelect там js уже имеется хоть отбавляй.

select id="lang" tabindex="1"> option value="l1" data-icon="images/flag_1.png">English/option> option value="l2" data-icon="images/flag_2.png" ">Русский/option> option value="l3" data-icon="images/flag_3.png" ">Deutsche/option> option value="l4" data-icon="images/flag_4.png" ">Français/option> option value="l5" data-icon="images/flag_5.png" ">Español/option> option value="l6" data-icon="images/flag_6.png" ">Português/option> option value="l7" data-icon="images/flag_7.png" ">Čeština/option> option value="l8" data-icon="images/flag_8.png" ">中国/option> option value="l9" data-icon="images/flag_9.png" ">Polski/option> /select>
var s = document.getElementsByTagName("select")[0]; function selectchange() { if (s.value == "15") { window.open("https://bing.com"); } }

Joey, как мне этим воспользоваться, в моём случае?

select id="lang" tabindex="1"> option value="l1" data-icon="images/flag_1.png">English/option> option value="l2" data-icon="images/flag_2.png" ">Русский/option> option value="l3" data-icon="images/flag_3.png" ">Deutsche/option> option value="l4" data-icon="images/flag_4.png" ">FranГ§ais/option> option value="l5" data-icon="images/flag_5.png" ">EspaГ±ol/option> option value="l6" data-icon="images/flag_6.png" ">PortuguГЄs/option> option value="l7" data-icon="images/flag_7.png" ">ДЊeЕЎtina/option> option value="l8" data-icon="images/flag_8.png" ">дё*е›Ѕ/option> option value="l9" data-icon="images/flag_9.png" ">Polski/option> /select>

Mailo, раз у Вашего селекта есть id (lang), то лучше искать не по тегу, а по id. после этого Вашего кода добавляете скрипт 

script> var s = document.getElementById("lang"); function selectchange() < if (s.value == "13") < window.open("/de"); // смотря куда Вам надо кинуть пользователя >> /script>

Mailo, Вы что, не потрудились изменить в моем коде одну буковку? У Вас в option-ах стоят не 11,12,13 и т.д., а L1, L2, L3. Поменяйте строчку
if (s.value == «13») на
if (s.value == » l 3″)

Читайте также:  Python выборка по условию

Добавлено через 3 минуты
Более того, у Вас лишние кавычки, которые вызывают ошибки

ЦитатаСообщение от Mailo Посмотреть сообщение

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

Лучший ответ

Сообщение было отмечено Mailo как решение

Решение

ЦитатаСообщение от Joey Посмотреть сообщение

select id="lang" tabindex="1" onChange="selectchange()">

Теперь точно работает (скопировал Ваш код как есть, вставил onChange=»selectchange()» — запустил, работает)

P.s. У Вас репа 112, я думал Вы опытный?

Во, заработало, спасибо! Благо тут есть специалисты с 600+ репой, которые хоть и с 4раза, но напишут правильную строку.

Mailo, прогиб засчитан)

Добавлено через 1 минуту
Mailo, Вы понимаете, что с коллегой по цеху как-то нетактично разговаривать как с неумехой? Потому и не разжевывал, как студентам-новичкам)

Joey,кстати, у вас в цеху вот так не делают или только в старых добрых традициях с добавлением после кода html?

select id="lang" tabindex="1" onchange="document.location=this.options[this.selectedIndex].value"> option value="l1" data-icon="images/flag_1.png">English/option> option value="https://bing.com" data-icon="images/flag_2.png" ">Русский/option> option value="l3" data-icon="images/flag_3.png" ">Deutsche/option> option value="l4" data-icon="images/flag_4.png" ">Français/option> option value="l5" data-icon="images/flag_5.png" ">Español/option> option value="l6" data-icon="images/flag_6.png" ">Português/option> option value="l7" data-icon="images/flag_7.png" ">Čeština/option> option value="l8" data-icon="images/flag_8.png" ">中国/option> option value="l9" data-icon="images/flag_9.png" ">Polski/option> /select>

Источник

Оцените статью
© 2023 Программирование