プルダウンメニューでリンク設定

選択されている項目を切り替える

  1. HOME
  2. プルダウン

日本語のページ

HTMLのプルダウンソースコード

<form id="form">
  <select name="select">
    <option value="location.html">日本語</option>
    <option value="location-en.html">English</option>
    <option value="location-zh.html">中文</option>
  </select>
</form>

JavaScriptのソースコードと解説

document.getElementById("form").select.onchange = function() {
  location.href = document.getElementById("form").select.value;
}
onchangeは、フォームに入力された内容が変わった際に発生し、function以降の処理が実行されます。

プルダウンメニューの場合<option>のvalue属性を調べるために、親要素である<select>のvalueプロパティを読み取る。

location.href = 新しいURL
locationオブジェクトはURLを調べたり、閲覧履歴を管理する機能がある。

selected属性
選択項目にあたるプルダウンやラジオボタン、チェックボックスはselected属性をつけておくと、読み込み後に初めから選択された状態となる。

<option value="index.html" selected>日本語</option>
※selected属性は値のないプール属性の為、下記ソースコードにより、初めからプルダウンメニュー項目が選択された状態にします！！
ちなみにプール属性とはselectedやcheckedなどのその属性があれば有効、なければ無効となるものを言う。 
var lang = document.querySelector("html").lang;

var opt;
  if (lang === "ja") {
  opt = document.querySelector('option[value="location.html"]');
} else if (lang === "en") {
  opt = document.querySelector('option[value="location-en.html"]');
} else if (lang === "zh") {
  opt = document.querySelector('option[value="location-zh.html"]');
}
opt.selected = true;

document.querySelectorメソッド

document.querySelector('CSSセレクター')
JavaScriptで要素を取得するのに、CSSセレクターが使える。
ソースコードではoptionタグのうち、value属性が”html”のパラメーターにマッチしています。

※CSSセレクターを使うことで、複数の要素にマッチする可能性がありますが、querySelectorメソッドは「最初にマッチした要素」1つだけを取得する。

location.html「指定した日本語のページ」が開いているときは、変数langに"ja"が保存されている。最初のif文でtrueになり、変数optに<option value="location.html">日本語</option>が代入される。

そして、最後に変数optに代入されている要素にselected属性を追加する。