<option>タグ内でhrefリンクを使用する

次の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年11月）：ドロップメニューを使用する場合、このメニューを実装するための間違いなくより良い方法がたくさんあります。この回答は直接的な質問に対する直接的な回答ですが、私はこの方法を一般向けWebサイトに推奨していません。

更新（2020年5月）：なぜコメントで私がこの解決策を提唱しないのかと誰かが尋ねました。それは意味論の問題だと思います。HTML要素にはセマンティックなミーティングがあり、目的を持ち、場所を取り、リストから物を選ぶことを目的としているので、ユーザーがフォームを選択するためにナビゲートし<a>て保持<select>したanchorsほうがいいです<select>。

考えてみましょう、あなたはその後、「意味」やこの「意図」されたもの（非グラフィカルブラウザやスクリーンリーダーやページがプログラムへのアクセス、またはJavaScriptが無効になっている場合）非伝統的なブラウザでページを表示している場合<select>、あなたは持っていますナビゲーションに使用？それは「ページ名を選んでください」と言っているだけで、他に多くはありません。確かにナビゲートすることについては何もありません。これへの簡単な対応はこれですwell i know that my users will be using IE or whatever so shrugが、これは意味論的な重要性の点を見逃しています。

いくつかの通常のアンカーを含む適切なレイアウト要素（および一部のjs）で作成されたファンキーなドロップダウンUI要素は、レイアウト要素が失われた場合でも意図を保持しますが、「これらはリンクの束です。1つ選択して、そこに移動します」 。

の誤用と乱用<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、少なくともハンドラを使用しないでください。これはキーボードユーザーにとっては本当に苦痛であり、3番目のアイテムにほとんどアクセスできなくなります。

受け入れられたソリューションは良さそうですが、処理できないケースが1つあります。

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

（toschoの答えについてコメントするのに十分な評判がありません。）

私はスクリーンリーダーを使った経験がありませんが、あなたのポイントは有効だと思います。

ただし、キーボードを使用して選択を操作する限り、キーボードを使用してオプションを選択するのは簡単です。

コントロールへのTAB

選択リストを開くにはSPACE

上矢印または下矢印を使用して、目的のリスト項目にスクロールします。

ENTERで目的のアイテムを選択します

ENTERでのみ、onchangeまたは（JQuery .change（））イベントが発生します。

私は個人的にはシンプルなメニューのフォームコントロールを使用しませんが、フォームコントロールを使用してページのプレゼンテーションを変更するWebアプリケーションがたくさんあります（たとえば、並べ替え順）。これらは、AJAXによって実装され、新しいコンテンツをページ、または古い実装では、基本的にページリンクである新しいページの読み込みをトリガーします。

これらはフォームコントロールの有効な使用法です。

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