використовуючи посилання href всередині тегу <option>

У мене є такий HTML-код:

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

Як я можу зробити значення " Домашня сторінка" , " Контакт" та " Карта сайту" посиланнями? Я використав наступний код і, як я очікував, він не працює:

<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);
});

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

Я не маю досвіду роботи з читачами екранів, і я впевнений, що ваші бали справедливі.

Однак, що стосується використання клавіатури для маніпуляції з вибором, неважливо вибрати будь-яку опцію за допомогою клавіатури:

ТАБ до контролю

SPACE, щоб відкрити список вибору

Стрілки вгору або вниз, щоб перейти до потрібного елемента списку

Введіть, щоб вибрати потрібний елемент

Тільки під час Введення ВВР запускає події onchange або (JQuery .change ()).

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

IMHO - це дійсні способи контролю форми.

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