プルダウンメニューを作っていきます。
index.htmlファイルをプルダウンメニュー分の数作成します。そして、外部scriptファイルを読み込みます。
今回は、親要素のフォームでくくります。idで紐付けます。
HTMLでのプルダウンメニューを作る場合は、slectタグを使います。これが子要素になります。
そして、その子要素にはoptionタグを使用します。
また、フォーム送信時にはname属性を付けます。このname属性はデータベースに送られるときの名前になります。
今回の場合だと、このフォームの名前は、slectとなります。
<form id="form">
<select name="select">
<option value="index.html">日本語</option>
<option value="index-en.html">English</option>
<option value="index-zh.html">中文</option>
</select>
</form>
次に、JS側の実装をみていきます。
'use strict';
document.getElementById('form').select.onchange = function() {
location.href = document.getElementById('form').select.value;
}
今回使用する、onchangeイベントは、フオームの入力が変わったときに発動されます。
イベントが発生した後は、functionが読み込まれます。
ファンクション内の処理は以下のようになります。
location.hrefは、locationがオブジェクトになり、hrefがプロバティになります。プロバティが表示しているページのURLを表します。
右側でformのidを紐付ます。そして、slect.valueはoptionのValue属性を調べるために、親要素のValueを調べます。
これを、locationに代入します。
HTMLタグのlang属性について
これは、そのページに書かれている主な言語を指定しています。
日本語は、ja 中国語は、zh 英語は、en になります。
それぞれのHTMLタグを変更します。そうすることで、ページ変移した際に、選択と表示の言語が異なるという現象を回避することができます。
const lang = document.querySelector('html').lang;
querySelectorメソッドは、()内でCSSのセレクターを使うことができます。
今回は、htmlタグからhtmlタグを取得しています。cssでいうタイプセレクタです。要素名で対象を指定してスタイルを適用する基本的なセレクタのことです。
if(lang === 'ja') {
document.querySelector('option[value="index.html"]').selected = true;
} else if(lang === 'en') {
document.querySelector('option[value="index-en.html"]').selected = true;
} else if(lang === 'zh') {
document.querySelector('option[value="index-zh.html"]').selected = true;
}
if文では、oputionタグのうち、index.htmlを取得します。
ちなみに、document('option')と書いたとすると、これはHTML内のすべてのoptionに該当します。
しかし、querySlectメソッドは、最初に該当したもののみを取得します。
HTMLタグにブール属性（selected，checked属性）を追加する場合は、その属性にtrueを代入します。
ちなみにプルダウンメニューでのイベント発生時は、今と違うoption属性を選んだときのみです。
そして、このように属性によってパターンが分かれるときは、switch文を使うことができます。
switch(lang) {
case 'ja':
document.querySelector('option[value="index.html"]').selected = true;
break;
case 'en':
document.querySelector('option[value="index-en.html"]').selected = true;
break;
case 'zh':
document.querySelector('option[value="index-zh.html"]').selected = true;
break;
}