JavaScript

プルダウンメニューで指定ページへ移る方法 | How to move to the specified page with the pull-down menu using JavaScript

日本語のページ | Japanese page

HTML <section>
<form id="form">
<select name="select">
<option value="Javascript超入門15_Japan.html">日本語</option>
<option value="Javascript超入門15_English.html">English</option>
<option value="Javascript超入門15_zh.html">中文</option>
</select>
</form>
<h2>日本語のページ | Japanese page</h2>
</section>

JavaScript document.getElementById('form').select.onchange = function(){
location.href = document.getElementById('form').select.value;
}

解説

HTMLにてプルダウンメニューを作成していきます。<form>にはid属性の「form」、<select>にはname属性「select」をつけます。また各<option>の属性には、それぞれの移動先ファイル名を入れています。プルダウンメニューの場合は、<select>のname属性と選択された<option>のvalue属性がセットになっており、サーバーに送信されます。

「 document.getElementById('form').select.onchange = function(){～　」→　onchangeイベントは、フォームに入力された内容が変わったときに発生します。今回のプルダウンメニューであれば選択項目が変わったときとなります。またプルダウンメニューのonchageイベントは<select>に発生しますので、selectを取得しています。

「 location.href = document.getElementById('form').select.value;」　→　ここでは<select>のvalueを取得しています。<select>にはvalueをつけていませんが、プルダウンメニューの場合は、選択されている<option>のvalue属性を調べるために、その親要素である<select>のプロパティを読み取ります。

locationオブジェクトのhrefプロパティは、表示しているページのURLを表します。locationオブジェクトはURLを調べたり、閲覧履歴を管理したりする機能があります。

ここまでの実装結果

プルダウンメニューを操作すると、すぐにページが移動します。しかし、一度英語ページや中国語ページに行って、日本語ページに戻ろうとすると戻れません。また、英語ページなのに「日本語」や中国語ページなのに「日本語」となっており、見た目もよくありません。この問題を解決していきます。

まず、今どの言語のページが表示されているかを判別できるように、それぞれのHTMLファイルの<html>タグにlang属性を追加します。

続いて次のようなプログラムを追加します。

JavaScript var lang = document.querySelector('html').lang;
var opt;
if(lang === 'ja'){
opt = document.querySelector('option[value="Javascript超入門15_Japan.html"]');
} else if(lang === 'en'){
opt = document.querySelector('option[value="Javascript超入門15_English.html"]');
} else if(lang === 'zh'){
opt = document.querySelector('option[value="Javascript超入門15_zh.html"]');
}
opt.selected = true;

解説

「 var lang = document.querySelector('html').lang;」→　変数langを定義して、そこにquerySelectorで取得した<html>～</html>のなかのlang属性の値を代入します。

次に変数optを定義して、続くif文でその変数optにデータを代入しています。

例えば、英語ページが開いているとき、変数langには「en」が保存されています。ということはif文がtrueになります。

ですので、変数optには「 <option value="Javascript超入門15_English.html">English</option>」が代入されます。

そして、ifの最後に「 opt.selected = true;」として変数optに代入されている要素にselected属性を追加しています。HTMLタグにブール属性(selected属性、checked属性など)を追加するには、その属性にtrueを代入します。逆にブール属性を削除するときは、falseを代入します。

ブール属性とは「その属性があれば有効、なければ無効」となるものです。例えばチェックボックスの場合、checked属性があれば、初めからチェックがついた状態で表示されます。

これで英語ページでは「English」が、中国語ページでは「中文」と表示されるようになりました。また日本語ページにも移動できるようになりました。

この本を参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。

もっと深く学びたい人にはこちらもどうぞ。| For those who want to learn more deeply, this is also recommended.

キャリアアップに必要なスキルを取得しよう。| Get the skills you need to advance your career.

オンラインで受講ができるスクールですので、全国どこからでも。 | Since it is a school where you can take classes online, you can take it from anywhere in the country.

ぺージの先頭に戻る(Return to top of page)

プライバシーポリシー