jsのドロップダウンの取得方法について教えて

質問

jsのドロップダウンの取得方法についてお教えください。
必ず、valueを記述しないと、選択したドロップダウンのリストを表示させることができない仕組みになっているのでしょうか。
個人的には、getEventListenersとか、innnerHTMLとかいう形で、
alertでも、外部ページにリンクでも、console.logという形でもなくて、表面に出したいです。
また、ちなみに、２つ以上のドロップダウンリストを使うと、初めて、指定できるようなシステムを作りたいです。
後、formは崩したくないです。
そんな贅沢は実現不可能でしょうか。
<form name="nankai_f">
出発駅は
<select name="nankai_q1">
<option>選択肢</option>
<option id="hoge">難波</option>
<option>新今宮</option>
<option>天下茶屋</option>
<option>堺東</option>
</select>
です。
<p>
到着駅は
<select name="nankai_q2">
<option>選択肢</option>
<option>難波</option>
<option>新今宮</option>
<option>天下茶屋</option>
<option>堺東</option>
です。<p>
無理なら無理とはっきり言ってくださいね。

回答No.1

retorofan · ベストアンサー

あなたのご希望について、
「そんな贅沢は実現不可能でしょうか。」
いいえ、実現できます。
「無理なら無理とはっきり言ってくださいね。」
無理ではないので、サンプルコードをお示しします。

ドロップダウンのリストについて

Q valueを記述しないと、選択したドロップダウンのリストを
表示させることができない仕組みになっているのでしょうか。

A いいえ、valueだけでなく、selectedIndex、text、textContentも使えます。

[仕様]
・現在のformをつかう (formは崩したくない)
・ドロップダウンのリストを表示させる
・２つ(以上)のドロップダウンリストを使って結果表示 (指定)
</pre>

<form name="nankai_f" onsubmit="return false">
出発駅は
<select name="nankai_q1">
<option selected>選択肢</option>
<option>難波</option>
<option>新今宮</option>
<option>天下茶屋</option>
<option>堺東</option>
</select>
です。
<p>
到着駅は
<select name="nankai_q2">
<option selected>選択肢</option>
<option>難波</option>
<option>新今宮</option>
<option>天下茶屋</option>
<option>堺東</option>
</select>
です。</p>
<p>
<input id="result" type="text" value="" size="30">
<input type="reset" value="リセット"></p>
</form>

<script>
(function(){

const form = document.nankai_f; //フォーム要素

form.onchange = function(){
//インデックスを取得
const i1 = form.nankai_q1.selectedIndex;
const i2 = form.nankai_q2.selectedIndex;

//禁止条件
if ( i1==0 || i2==0) {
return false;
}

//テキストを取得
const text1 = form.nankai_q1.options[i1].text;
const text2 = form.nankai_q2.options[i2].text;

let str = text1 + " から " + text2 + " まで";

if (i1==i2) {
str ="異なる駅名を選んでください。";
}

form.result.value = str; //結果を表示
};

})();
</script>

お礼

どうもご丁寧にありがとうございました。