【JavaScript】でラベル名を取得したい

質問

【JavaScriptで】セレクトボックスからラベル名を取得する方法

下に書いたHTMLのセレクトボックスからラベル名を取得するにはどうしたらよいのでしょうか？
HTMLにvalue値をつけずにこのように記述すると、下記のJavaScriptの記述でラベル名が取得できます。
*****************
<select>
<option>1月</option>
<option>2月</option>
<option>3月</option>
</select>

https://imgur.com/T8W1Umy
*****************

ところが下記のようにvalueに値をつけるとvalueの値が出力されラベル名は表示されません。
都道府県名や名前など各々valueの値と、ラベル名が異なることはよくあることと思います。
以下に記述したHTML（valueの値がついたもの）のセレクトボックスからラベル名を取得するにはどのように記述したら良いのでしょうか？
分かる方いらっしゃいましたら教えて下さい。宜しくお願いします。

（JS）
'use strict';
{

document.querySelector('button').addEventListener('click', () => {
const li = document.createElement('li');
const month = document.querySelector('select');
li.textContent = month.value;
document.querySelector('ul').appendChild(li);
});

}
----------------------------------------

（HTML）

<select>
<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
</select>

<button>Add!</button>
<ul>
</ul>

回答No.1

Proof4 · ベストアンサー

JavaScriptを下記のように変更します。

document.querySelector('button').addEventListener('click', () => {
const li = document.createElement('li');
const month = document.querySelector('select');
// 選択されたoptionを取得
const selected_option = document.querySelector(`option[value="${month.value}"]`);
li.textContent = selected_option.innerHTML;
document.querySelector('ul').appendChild(li);
});

selectのvalueには、選択されたoptionのvalueが設定されるため、
li.textContent = month.value;
ではvalueの値が書き込まれます。
変更後のコードでは、選択されたvalueの値をもとにoptionを選択しinnerHTMLを取得しています。

option[value="${month.value}"] はCSSセレクタで、指定したvalueの値（この場合は${month.value}）を持つoption要素という意味になります。（参考：https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors）

お礼

うまく行きました。ご丁寧、詳細な説明ありがとうございました。とても助かりました。