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

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

114 голосов
/ 04 января 2010

У меня есть следующий 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>

Ответы [ 8 ]

236 голосов
/ 04 января 2010 
<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 г.): В наше время, если вы хотите иметь раскрывающееся меню, существует множество, возможно, лучших способов реализовать его. ответ на прямой вопрос, но я не защищаю этот метод для публичных веб-сайтов.

15 голосов
/ 04 января 2010

Вы не можете использовать теги href без тегов option.Для этого вам понадобится 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>
12 голосов
/ 18 апреля 2010

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

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

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

7 голосов
/ 13 июня 2016

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

Событие "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);
});
5 голосов
/ 18 сентября 2014

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

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

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

TAB к контролю

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

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

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

Только при ENTER запускается событие onchange или (JQuery .change ()).

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

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

3 голосов
/ 04 января 2010

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

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

2 голосов
/ 10 мая 2017 
    <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>
0 голосов
/ 20 ноября 2014

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

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