常識から非常識までselect要素を使った情報取得について紹介します。
value==単調増加の数値
<select id=s><option value=1>paq<option value=2>cmix<option value=3>nncp</select>
<input id=i>
<script>s.onchange=()=>i.value=s.value</script>
このような場合value属性を設定するまでもありません。value=数値の部分を全て排除してselectedIndex+1を参照すれば事足ります。
<select id=s><option>paq<option>cmix<option>nncp</select>
<script>s.onchange=()=>i.value=s.selectedIndex+1</script>
value==optionの文字列
<select id=s><option value=huffman>huffman<option value=jones>jones<option value=polar>polar</select>
<input id=i>
<script>s.onchange=()=>i.value=s.value</script>
value=文字列の部分を全て排除してoptions[...].textを参照すれば事足ります。
<select id=s><option>huffman<option>jones<option>polar</select>
<input id=i>
<script>s.onchange=()=>i.value=s.options[s.selectedIndex].text</script>
text or value?
option要素にvalueが設定されていない場合、valueを参照するとtextの値が返される模様。
value=""だとtextの値を無視して空文字列が返されます。
逆にvalueが設定されていてtextがスッカラカンの場合は、valueは設定値通り取得され、textを参照すると空文字が返されます。
<select id=s><option>lzw<option value=bwt><option value="">ppm</select><br>
<script>
for(let t of s.options)document.write(t.text," (",t.value,")<br>")
</script>
sizeがoption数がより大きい
<select id=s size=4><option>la+<option>demon</select><br>
<script>
for(let t of s.options)document.write(t.text," (",t.value,")<br>")
</script>
option数を超えて参照される訳がありません。本当です。何でもしないので信じて下さい。
optionがcssで非表示
<style>option{display:none}</style>
<select id=s><option>null<option>obfuscate<option>minify</select><br>
<script>
for(let t of s.options)document.write(t.text," (",t.value,")<br>")
</script>
先頭のoptionだけ表示されます。こんな事する意味あるんでしょうか…。JavaScriptでは全option参照できるのは言うまでもありません。
実験環境
窓s10 偶狂苦労夢122.0.6261.129