ちょっとディープな生物の世界

【JavaScript】プルダウンメニューを作成して指定されたURLに飛ばしてみよう

<select>でプルダウンメニューを作成する

<select>はプルダウンメニュー(セレクトボックス)を作成するタグです。 初期値ではプルダウンメニューですが、size属性で選択肢の表示行数を変更することもできます。

<form id ="form">
  <select name ="selectsite">
    <option value ="http://manabu-biology.com/">バイオハックch</option>
    <option value ="https://www.google.com/">google</option>
    <option value ="https://www.yahoo.co.jp/">yahoo</option>
  </select>
</form>
document.getElementById("form").selectsite.onchange = function(){
    location.href = document.getElementById("form").selectsite.value;
}

onchangeとは?

onchangeイベントは、内容が変化した時に発生するイベントハンドラです。今回は、プルダウンメニューが選択されたときに発生します。

document.getElementById("form").selectsite.onchange

「.selctsite」は<select>のnam属性です。<select name = “selectsite”>を取得します。フォームの部品を取得するためには、その部品のname属性を指定する必要があります。

コメントを残す

メールアドレスが公開されることはありません。