なでしこ3の「セレクトボックス作成」命令を用いると、select 要素を作成できる。
この命令のマニュアル
📖 なでしこ3 マニュアル - plugin_browser/セレクトボックス作成
には、このような記述がある。
マルチプルセレクトボックスは、複数選択できるセレクトボックスです。(ctrlを押しながら選択)
この場合の選択された値の取得は、ちょっと面倒でした。
各オプションのselectedの値を参照しなければならないようです。
しかし、これは誤りであり、各オプションのselectedの値を参照しなくてもマルチプルセレクトボックスで選択された値を取得することができる。
取得する方法
select 要素 (HTMLSelectElement) の selectedOptions プロパティを参照することで、現在選択されている選択肢を、かつそれのみを取得できる。
結果は配列風オブジェクトの HTMLCollection として返され、その要素は選択されている選択肢を表す option 要素である。
これらの要素に「テキスト取得」命令を用いると、選択肢の文字列を取得できる。
文字列の取得は、ループで1個ずつ行わず、「配列マップ」命令で一括して行うことができる。
さらに取得した文字列の配列に「配列結合」を用いることで、結果を1個の改行区切りの文字列として得ることができる。
マニュアルに載っているサンプルで用いられている「一行追加」を用いた方法と異なり、この方法では得られる文字列の最後に改行が入らない。
言語リストは「なでしこ,C言語,C++,JavaScript,TypeScript,Python」を「,」で区切る。
選択箱は言語リストのセレクトボックス作成。
それの「multiple」にオンをDOM属性設定。
それの「size」に(言語リストの要素数)をDOM属性設定。
「確認」のボタン作成。
それをクリックした時には
選択肢取得は関数(E) それはEのテキスト取得。ここまで。
選択箱の「selectedOptions」をDOM属性取得。
それに選択肢取得を配列マップ。
それを改行で配列結合して言う。
ここまで。
See the Pen nako3 multiple select test by MikeCAT (@mike_cat) on CodePen.
うまくいかない方法
上記サンプルの
それに選択肢取得を配列マップ。
のかわりに、「テキスト取得」を直接用いて
それに{関数}テキスト取得を配列マップ。
とすると、うまくいかなかった。
具体的には、
Uncaught TypeError: can't access property "__exec", e is undefined
というエラーになってしまった。
対応ブラウザ
HTMLSelectElement API: selectedOptions | Can I use... Support tables for HTML5, CSS3, etc
によると、以下のブラウザは今回用いた selectedOptions に対応しているようである。
- Chrome 19
- Edge 12
- Safari 6
- Firefox 26
- Opera 10
これらのブラウザは、遅いものでも2015年にはリリースされており、これは
Releases · kujirahand/nadesiko3
で確認できる最古のバージョンである v3/0.1.7 がリリースされた2017年よりも前である。
一方、Internet Explorer は対応していないとなっている。
また、以下のブラウザは対応状況が不明となっている。
- Opera Mini
- UC Browser for Android
- QQ Browser
- Baidu Browser
- KaiOS Browser
執筆時点での「なでしこ3 対応ブラウザ一覧」を確認すると、このうち
- Opera Mini
- UC Browser for Android
- QQ Browser
- KaiOS Browser
は対応しているとされるブラウザに含まれ、Internet Explorer と Baidu Browser は含まれていない。
筆者が試したところ、いつからサポートされているかは不明であるが、少なくとも Opera Mini 92.0.2254.77878 では動作するようである。
また、UC Browser V14.7.2.1365 でも動作するようである。
 |
 |
|---|
「なでしこ3」が対応しているとされ、Can I use... で selectedOptions への対応状況が不明となっている残りのブラウザは
- QQ Browser
- KaiOS Browser
である。
QQ Browser は Google Play で見当たらず、KaiOS Browser は KaiOS という特殊な環境向けのようであるため、これらでの動作確認は難しそうだと判断した。
QQ Browser - Wikipedia
によれば、QQ Browser 9.7 は Chromium 53 ベースのようである。
また、
KaiOS - Wikipedia
によれば、KaiOS は 2.0 の時点で (Firefox 48 に相当する) Gecko 48 ベースのようである。
よって、これらのブラウザでも selectedOptions は動作することが期待できそうだ。
まとめ
なでしこ3の「セレクトボックス作成」命令のマニュアルでは「各オプションのselectedの値を参照しなければならないようです」と主張しているが、selectedOptions プロパティを用いることで selected の値を参照しなくても選択された値を取得でき、この主張が誤りであることを示した。
また、この selectedOptions プロパティは、なでしこ3が対応しているブラウザの多くで使えそうであることを確かめた。