Select Option の代替品（７）

<Select> <Option> の代替品を作ったのは、ＣＤ、ＬＰデータ管理データベースのスマホ版に使用するためでした。実際に組み込もうとして見直したら、いくつかの問題が見つかりました。
（１）「初期状態で選択されているオプションがない場合は、最初のオプションを選択状態とする」が未作成だった。
（２）選択肢表示ウインドウの幅が固定である。オプションリストの幅を決めるには、選択肢キャプションの長さ（文字数ではなく、画面上でのピクセル数が必用なんですが、それを調べるのに時間がかかってしまいました。以下の方法で取得できました。 <canvas id=\"canvas\" width=\"0\" height=\"0\" style=\"visibility:hidden;position:absolute;\"></canvas>canvas はグラフィックやアニメーションのための要素だそうですが、使った事はなかった。
var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var maxOptionLength = 0; metrics = context.measureText(optionText); if(maxOptionLength < metrics.width){ maxOptionLength = metrics.width; }としてキャプションの最大長さを取得しました。
・オプションリストに使える幅（可能な最大幅）を得る。画面幅から適当な余白を差し引いた幅。・キャプションの最大長さが可能な最大幅よりも小さい場合は、キャプションの最大長さをオプションリストの幅とする。・そうでない場合は、長いキャプションの末尾を切り捨て、省略記号「…」とする。これを実現するために、<li style に「overflow:hidden;white-space:nowrap; text-overflow:ellipsis;」を付け加えました。キャプションが長すぎるものにだけ付加すればいいのだけど、面倒なので全部に付加しました。後は左右の位置を適当に決めれば良い。MySelect 左端から右側の余地が十分な場合は MySelect の左端に揃えて、そうでない場合は画面右側に適度な余白がある位置としました。
（３）onChange などのイベントハンドラを起動できない。記述してなかったので起動できるわけはなかったのですが・・・。ちょっと苦戦しましたが、何とかなりました。とりあえず必用なのは onChange なので、それだけを実装しました。本来の <Select> はイベント change を投げるのでしょうが、MySelect では指定された function を実行するようにしました。理由は mySelect は Html のタグではなく、私の応用では Java のメソッドで書き出すようになっているからです。苦戦した理由は、change を検出できるのは function setValue() 内なのですが、その場所に直接に直接呼び出すべき function を記述するのはまずいからです。そんな事をすると汎用性なしになってしまいますからね。MySelect を書き出すメソッドに change で起動すべき function と、その function に渡すパラメータを引数として渡すように、それを etValue へ引数として渡すようにしました。手こずったのは、setValue() に引数で渡す function と function のパラメータでした。setValue() へのパラメータを記述する部分で呼び出すべき function などを「'」（シングルクォート）で囲んでいたのが原因でした。受け取った setValue() は文字列だと解釈していたのですね。確かに、文字列は function ではない。「'」で囲むのをやめたらＯＫでした。次に問題になったのは、onChange function に渡すパラメータでした。パラメータの数は MySelect を書き出す Java のメソッドが決めるのではなく、そのメソッドを呼び出すもの（私のアプリでは別の Java メソッド）が決めるんです。調べているうちに、JavaScript に arguments というのがある事が分かりました。やれやれ、何とかなりました。

後は冗長な部分を直すとかですね。