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

Question

[Rokis]

Вот код списка:

<nav class="menu"><!--начало меню-->
  <select class="minimenu" style="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
</nav><!--конец меню-->

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

Answer 1

[Виталий Инчин ☢]

document.querySelector(".minimenu").onchange = function(){
  location.assign(this.value);
}

<select class="minimenu">
   <option value="http://google.com">Гугл</option> 
   <option value="http://ya.ru">Яндек</option>
   <option value="http://vk.com">Вконтакте</option>
   <option value="http://mail.ru">MailRu</option>
</select>

Но, зачем?

Comments

[Rokis]

Хочу использовать такой подход как навигационное меню для мобильной версии

[Виталий Инчин ☢]

Rokis: плохой подход, так как примитивные телефоны о js даже не слыхали...

[Михаил Чирский]

Виталий Инчин ☢: покажите хоть 1 сайт, который сейчас работает без JS?

[Виталий Инчин ☢]

Михаил Чирский: >для мобильной версии

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

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

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

[Михаил Чирский]

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

[Антон Вебсайтовский]

Такой метод не работает.

[paleolog]

спасибо, помогло

Answer 2

[IceJOKER]

<option data-href="http://domain.com">Domain.com</option>

$('option').click(function(){
 
  var href = $(this).data('href');
  if(href) { location.href = href; }

});

Comments

[Rokis]

Uncaught ReferenceError: $ is not defined

[Алексей Уколов]

Ваши мобильные пользователи теперь должны будут качать jQuery, чтобы навигация заработала.

[IceJOKER]

Rokis: Виталий Инчин ☢ написал вариант без jQuery

Answer 3

[Алексей Уколов]

Да, нужно обрабатывать изменение значения select на js. Но лучше, конечно, сделать нормальное меню, элемент select вообще не для этого.

Comments

[Rokis]

Для мобильной версии нужно просто.

[Алексей Уколов]

И что, что для мобильной?

[Rokis]

Я думаю, что этот подход будет лучше других

[Алексей Уколов]

Кривой костыль, требующий обработки на js будет лучше других способов? Да вы шутите.

[Rokis]

ну наверное я не так опытен в этом деле :)