ＣＤ、ＬＰ管理と音楽のデータベース・システム　RecLib : Select　Option の代替品（１）

スマホ版を作成中ですが、スマホは指で操作するため、ボタンなどを大きくしなくては思ったように操作できません。<Select><Option> では、オプションリストの行の高さを大きくしたいのですが、<Option> に style をセットしても手応えなし。
考えているうちに、<Select><Option> と同じような動きをする物が作れそうに思えてきたので、やってみました。本物の <Select><Option> とは多少違うのですが、主要な機能は同じものを作る事ができました。

【まだＰＣ Windows 10 でしか動かしていません]

ブラウザのウインドウを小さくして動かした限り、よさそうです。実際のスマホの場合、アンドロイドだったりするわけで、問題が出る可能性はありますが、とりあえず動いたので公開します。

使っているのは JavaScript だけです。

多分、「<Select><Option> の代替品（５）」で実行可能な html ファイルを書き込む予定です。このブログサイトにはダウンロード可能なファイルをＵｐし、読者がダウンロードできる機能はないようなので、html をテキストとして投稿する予定です。

・<Select><Option> は使わない。

<Select> は <Option selected> あるいは最初の <Option> にある caption を現在選択されている物として表示すると思われます。つまり、<Option> が必用。<Option> が意図したように動いてくれないならば <Option> は使えない。<Select> は使用して <Option> の代わりに <MyOption> などを使うには <Select> を処理する部分（つまり、ブラウザ）を修正しなくてはならないでしょう。そういう訳なので、<Select><Option> は使いません。

・<Select> の代替品【以下、MySelect と書く場合があります。】

必用条件は、現在の選択値のキャプションを表示できる事、それを JavaScript で書き換える事ができる事、ユーザーは書き換えられない事、クリックした時イベントが発生する事、<Select> の value 相当の値を適切なパラメータ名で送信できる事などです。結局、以下のようにしました。

</span>

・現在選択値の表示、▽のボタンには readonly の text を使っているのは、最初に思いついたのが readonly text だったからで、動作したのでそのままになっています。

・Html パラメータの送出には <hidden> を使っています。hidden の name に記述する名前は <Select> に記述する名前です。

・text に表示される枠があると、現在値表示、▽ボタンに個別の枠が表示されてしまい、見た目が大きく異なります。「枠なし」とします。

・２つの text 全体を囲む枠は欲しいので、<span> で囲み、それに枠を付けました。

【重要】２つの ,input typw=text ...> の間に改行を入れてはいけません。ここでは読みやすさのために改行していますが、実際の html に改行を入れると

Firefox:まともに表示される。

Chrome, Edge : こけしを横倒ししたよう不思議な形の外形が表示される。

となります。どうやた、改行はデフォルト高さの空白文字に変換されているようです。

・<Select> の代替品、行ごとの説明

style="outline:solid thin; 枠あり、細い実線 width:150px;

id="MySel0 　　JavaScript で処理する時に参照するための id onClick="dispMyOption('MySel0','MySelT0','MyOpt0','MyLi0','17') クリックされた時の処理

'MySel0' 　　<Select 代替品を囲む <span> の id

'MySelT0' 現在値を表示する readonly text の id

'MyOpt0' オプションリスト（後述）全体の id

'MyUl0' オプションリストの <ul> の id

'17' オプションリストの行数

<input type="text" readonly style="cursor:default;outline:none;border:none;width:135px;height:40px;" id="MySelT0" value=""> 現在値を表示する領域。

<input type="text" readonly style="cursor:default;outline:none;border:none;

text-align:right;width:15px;height:40px;" value="v " class="aH">

▽を表示する領域。▽は小文字の v で代用しています。

</span>
<input type="hidden" name="TestParam" value="">

選択値を Html パラメータとして送出するためのもの。name は送出されるパラメータの名前で、<Select name=...> に記述する名前。

・<Option> の代替品

<li onMouseOut="onMouseOutFunction('MySel0',this,'0');" onMouseOver="this.style.background='lightskyblue';" style="text-align:left;padding-left:20;padding-top:10;padding-bottom:10;" onClick="setValue('MySel0','MySelT0','MyOpt0','222','アイルランド','0','TestParam')">アイルランド</li>

<li onMouseOut=・・中略・・</li>　　必用なだけ繰返し記述

</ul></div>
オプションリストには <div><ul>　<li></li>　</ul><div> を使いました。<div> はオプションリスト全体で、その時の画面の大きさ、スクロール量に応じて表示位置を調整する時、オプションリスト全体を「１つの物」として扱うためのものです。

<ul> <li> の説明は不要は省略

・<Option> の代替品　行ごとの説明

id="MyOpt0" JavaScript から参照するための id

styledisplay:none; 初期状態は非表示

position:fixed;border:1px solid #000; 境界線あり、1px 幅の実線、黒色background-color:#fff; 背景色は白

id="MyOpt0" JavaScript から参照するための id
styledisplay:none; 非表示

position:fixed; 位置は固定。実際に表示する時 JavaScript で調整します。

border:1px solid #000 境界線。1px 幅の実線、黒色

background-color:#fff 背景色は白

onMouseOut="onMouseOutFunction('MySel0',this,'0');マウスが離れた時の処理

onMouseOver="this.style.background='lightskyblue'; マウスが乗った時の処理。「選択色」とする。

styletext-align:left; テキストは左詰め

padding-left:20 左の padding

padding-top:10; 上の padding

padding-bottom:10; 下のpaddingon

Click="setValue('MySel0','MySelT0','MyOpt0','222','アイルランド', '0','TestParam')">

クリックされた時の処理。

'MySel0','MySelT0','MyOpt0', JavaScript から参照するための id。

何の id かは「<Select> の代替品、行ごとの説明」にあります。

'222' 「アイルランド」のパラメータ値。<Option value=...> に記述する値に相当。

'アイルランド' クリックされた時、mySelect に表示する文字列。<Option> </Option> 間に記述する文字列に相当。

'0' 「アイルランド」の、<ul> 内の位置。行番号。

'TestParam' Html パラメータの名前。JavaScript が <hidden> を参照するための名前。</ul></div>
今回はここまで。次回は JavaScript その１。かなり長いスクリプトなので、２回に分けて書きます。