Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@akari_0618

プルダウンメニュー

プルダウンメニューを作っていきます。
index.htmlファイルをプルダウンメニュー分の数作成します。そして、外部scriptファイルを読み込みます。

今回は、親要素のフォームでくくります。idで紐付けます。
HTMLでのプルダウンメニューを作る場合は、slectタグを使います。これが子要素になります。
そして、その子要素にはoptionタグを使用します。
また、フォーム送信時にはname属性を付けます。このname属性はデータベースに送られるときの名前になります。
今回の場合だと、このフォームの名前は、slectとなります。

index.html
    <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側の実装をみていきます。

script.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タグを変更します。そうすることで、ページ変移した際に、選択と表示の言語が異なるという現象を回避することができます。

script.js
const lang = document.querySelector('html').lang;

querySelectorメソッドは、()内でCSSのセレクターを使うことができます。
今回は、htmlタグからhtmlタグを取得しています。cssでいうタイプセレクタです。要素名で対象を指定してスタイルを適用する基本的なセレクタのことです。

script.js
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文を使うことができます。

index.js
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;
}

出典
https://www.amazon.co.jp/%E7%A2%BA%E3%81%8B%E3%81%AA%E5%8A%9B%E3%81%8C%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8FJavaScript%E3%80%8C%E8%B6%85%E3%80%8D%E5%85%A5%E9%96%80-%E7%AC%AC2%E7%89%88-%E7%8B%A9%E9%87%8E-%E7%A5%90%E6%9D%B1/dp/4815601577

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
akari_0618
最近駆け出したエンジニアなーすです。 初心者のための初心者による初心者に関しての技術ブログになってます。 Twitter(@pro_ai_01)フォローするとモチベが上がり、インスタ(pro_ai)フォローするとこれまたモチベ上がります。Qiitaフォローするとまたモチベも上がり理解も深まります。 人生もプログラミングも一石三鳥ぐらいでいい感じに行きましょ😎

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?