используя href-ссылки внутри тега <option>

У меня есть следующий HTML-код:

<select name="forma">
    <option value="Home">Home</option>
    <option value="Contact">Contact</option>
    <option value="Sitemap">Sitemap</option>
</select>

Как я могу сделать значения Home , Contact и Sitemap в качестве ссылок? Я использовал следующий код, и, как я ожидал, он не сработал:

<select name="forma">
    <option value="Home"><a href="home.php">Home</a></option>
    <option value="Contact"><a href="contact.php">Contact</a></option>
    <option value="Sitemap"><a href="sitemap.php">Sitemap</a></option>
</select>

<select name="forma" onchange="location = this.value;">
 <option value="Home.php">Home</option>
 <option value="Contact.php">Contact</option>
 <option value="Sitemap.php">Sitemap</option>
</select>

ОБНОВЛЕНИЕ (ноябрь 2015 г.): в наши дни, если вы хотите иметь раскрывающееся меню, существует множество, возможно, более эффективных способов его реализации. Этот ответ является прямым ответом на прямой вопрос, но я не защищаю этот метод для общедоступных веб-сайтов.

ОБНОВЛЕНИЕ (май 2020 г.): кто-то спросил в комментариях, почему я не защищаю это решение. Думаю, это вопрос семантики. Я бы предпочел, чтобы мои пользователи перемещались, используя <a>и сохраняемые <select>для выбора формы, потому что элементы HTML имеют семантическую встречу, и у них есть цель, anchorsзанимать места, <select>для выбора вещей из списков.

Подумайте, если вы просматриваете страницу в нетрадиционном браузере (не графический браузер или программа для чтения с экрана, или доступ к странице осуществляется программно, или JavaScript отключен), каков тогда «смысл» или «намерение» этого <select>? используется для навигации? Здесь говорится «пожалуйста, выберите имя страницы» и ничего больше, уж точно ничего о навигации. Легко ответить на это, well i know that my users will be using IE or whatever so shrugно здесь упускается смысл семантической важности.

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

Вот статья о неправильном использовании и злоупотреблении<select> .

Вы не можете использовать теги href в тегах параметров. Для этого вам понадобится javascript.

<select name="formal" onchange="javascript:handleSelect(this)">
<option value="home">Home</option>
<option value="contact">Contact</option>
</select>

<script type="text/javascript">
  function handleSelect(elm)
  {
     window.location = elm.value+".php";
  }
</script>

Вместо этого используйте настоящее раскрывающееся меню: список ( ul, li) и ссылки. Никогда не используйте элементы формы в качестве ссылок.

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

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

Принятое решение выглядит хорошо, но есть один случай, с которым оно не справляется:

Событие «onchange» не будет инициировано при повторном выборе той же опции. Итак, я сделал следующее улучшение:

HTML

<select id="sampleSelect" >
  <option value="Home.php">Home</option>
  <option value="Contact.php">Contact</option>
  <option value="Sitemap.php">Sitemap</option>
</select>

jQuery

$("select").click(function() {
  var open = $(this).data("isopen");
  if(open) {
    window.location.href = $(this).val()
  }
  //set isopen to opposite so next time when use clicked select box
  //it wont trigger this event
  $(this).data("isopen", !open);
});

(У меня недостаточно репутации, чтобы комментировать ответ Тошо.)

У меня нет опыта работы с программами чтения с экрана, и я уверен, что ваша точка зрения верна.

Однако что касается использования клавиатуры для управления выбором, выбрать любой вариант с помощью клавиатуры тривиально:

TAB к элементу управления

ПРОБЕЛ, чтобы открыть список выбора

Стрелки ВВЕРХ или ВНИЗ для перехода к нужному элементу списка

ENTER для выбора желаемого элемента

Только при вводе срабатывает событие onchange или (JQuery .change ()).

Хотя я лично не стал бы использовать элемент управления формы для простых меню, существует множество веб-приложений, которые используют элементы управления формы для изменения представления страницы (например, порядка сортировки). Они могут быть реализованы либо с помощью AJAX, чтобы загружать новый контент в page или, в более старых реализациях, путем запуска новой загрузки страницы, которая по сути является ссылкой на страницу.

ИМХО, это допустимые варианты использования элемента управления формой.

<select>Тег создает выпадающий список. Вы не можете помещать html-ссылки в раскрывающийся список.

Однако есть библиотеки JavaScript, которые предоставляют аналогичные функции. Вот один пример: http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

    <select name="career" id="career" onchange="location = this.value;">
        <option value="resume" selected> All Applications </option>
        <option value="resume&j=14">Seo Expert</option>
        <option value="resume&j=21">Project Manager</option>
        <option value="resume&j=33">Php Developer</option>
    </select>

Попробуйте этот код

<select name="forma" onchange="location = this.options[this.selectedIndex].value;">
 <option value="Home.php">Home</option>
 <option value="Contact.php">Contact</option>
 <option value="Sitemap.php">Sitemap</option>
</select>