web-dev-qa-db-ja.com

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

私は以下の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>
htmlformstagsanchoroption
113
makmour
<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サイトには推奨しません。

236
gingerbreadboy

オプションタグ内で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>
17
Zaje

代わりに実際のドロップダウンメニューを使用してください：リスト（ul、li）とリンク。フォーム要素をリンクとして誤用しないでください。

スクリーンリーダーを持つ読者は通常、自動的に生成されたリンクのリストをスキャンします - これらの重要な情報を見逃してしまうでしょう。多くのキーボードナビゲーションシステム（例えば、ＪＡＷＳ、オペラ）は、リンクおよびフォーム要素に対して異なるキーボードショートカットを提供する。

それでもselectのアイデアをやめることができない場合は、少なくともonchangeハンドラを使用しないでください。これはキーボードユーザーにとっては大変な作業です。3番目の項目にアクセスできなくなります。

12
fuxia

受け入れられている解決策は良さそうに見えますが、処理できないケースが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);
});
7
Oscar Zhang

（私はtoschoの答えにコメントするのに十分な評判を持っていません。）

私はスクリーンリーダーについての経験がなく、あなたの意見は正当であると確信しています。

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

コントロールへのTAB

選択リストを開くためのSPACE

目的のリスト項目にスクロールするための上下の矢印

希望の項目を選択するためにENTERを押してください

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

私は個人的には単純なメニューにはフォームコントロールを使用しませんが、フォームコントロールを使用してページの表示方法を変更するWebアプリケーションが多数あります（ソート順など）。これらはAJAXのいずれかによって実装できます。ページに新しいコンテンツをロードするか、または古い実装では、新しいページのロードをトリガーすることによって行います。これは基本的にページリンクです。

私見これらはフォームコントロールの有効な使い方です。

5
Rich Cloutier

<select>タグはドロップダウンリストを作成します。あなたはドロップダウンの中にhtmlリンクを置くことができません。

ただし、同様の機能を提供するJavaScriptライブラリがあります。これがその一例です。 http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

3
danben
    <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>
2
azkhawaja