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

Ответ 1

<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>

UPDATE (Nov 2015): В этот день и в возрасте, если вы хотите иметь меню перетаскивания, возможно много лучшие способы их реализации. Этот ответ является прямым ответом на прямой вопрос, но я не защищаю этот метод для публичных веб-сайтов.

Ответ 2

Вы не можете использовать теги 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>

Ответ 3

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

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

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

Ответ 4

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

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

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

TAB для управления

SPACE, чтобы открыть список выбора

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

ВВОД, чтобы выбрать нужный элемент

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

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

IMHO - это правильное использование элемента управления формой.

Ответ 5

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

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

Ответ 6

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

событие "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);
});

Ответ 7

    <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>

Ответ 8

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

<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>