【JavaScript】select要素の先頭・末尾にあるoptionの値を取得する

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptでselect要素の先頭・末尾にあるoptionの値を取得する方法をご紹介しています。

JavaScriptでselect要素の先頭もしくは末尾にあるoptionの値を取得したいな。良い方法ないかな?

上記の疑問にお答えします。

では、解説していきます。

select要素を取得する

optionの値を取得するため、親要素であるselect要素を取得します。他の要素を取得するときと同様にquerySelector等で要素を取得します。

HTML

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

JavaScript

const select = document.querySelector('select');

これでselect要素を取得することができました。続けてselect要素の先頭・末尾にあるoptionの値を取得します。先頭・末尾のoptionの値を取得する方法はいくつかありますが、簡単に取得できる方法として下記が挙げられます。

  • firstElementChild、lastElementChildで先頭・末尾の子要素を取得する
  • indexを指定して先頭・末尾の要素を取得する

それぞれ詳しくご紹介していきます。

firstElementChild、lastElementChildで先頭・末尾の子要素を取得する

firstElementChildlastElementChildで先頭・末尾の子要素を取得し、要素のvalueプロパティから値を取得します。

HTML

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

JavaScript

const select = document.querySelector('select');
const firstOptionValue = select.firstElementChild.value;
const lastOptionValue = select.lastElementChild.value;

console.log(firstOptionValue, lastOptionValue);

実行結果

1 5

実行結果を確認すると、先頭・末尾のoptionの値が取得できているのがご確認いただけます。

indexを指定して先頭・末尾の要素を取得する

取得したselect要素のoptionindexを指定して先頭・末尾の要素を取得します。先頭要素はindexに0を指定し、末尾の要素はoptionslengthから1を引いたindexを指定します。

HTML

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

JavaScript

const select = document.querySelector('select');
const options = select.options;
const firstOptionValue = options[0].value;
const lastOptionValue = options[options.length-1].value;

console.log(firstOptionValue, lastOptionValue);

実行結果

1 5

これでoptionのindexを指定して先頭・末尾の要素を取得することができました。

最後に

ある要素の先頭・末尾を取得する方法として、本記事の内容は幅広く使用されています。option以外の要素にも応用が利きますので、基本的な処理の流れを覚えておくと良いかもしれませんね。

以上、JavaScriptでselect要素の先頭・末尾にあるoptionの値を取得する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら