1. ホーム
  2. Web制作
  3. HTML/Xhtml

選択/フォーカスされたときにすべてのオプションを表示させる良い方法は、現在

2022-01-13 16:15:43
開発中にこのような要件に出くわしたので、バックアップとして文書化しておきました。
要求事項の背景
ページ上のショートカットキーボードで、支払い方法の選択ボックス(ドロップダウンリスト)を素早く探し出し、選択することができます。
技術的な困難
現在のブラウザは、コードによって位置決めされた場合、ドロップダウンリストのすべてのオプションをリスト表示することをサポートしていません(マウスクリックのみ)。
Webで情報を探した結果、現時点でのベターな対処法。
selectのsizeプロパティとボックスレイアウトのpositionプロパティを併用し、以下のようなコードで実現します。
コピーコード
コードは以下の通りです。

<td align="right">
Payment Method:
</td>
<td style="padding:0px;vertical-align:top;">
<! -- The select must be wrapped in a div here, otherwise it's not compatible under ff -->
<span style="color:#ff0000"><div style="position:relative;padding:1px;">
</span> <select id="payType" name="payType" style="position:absolute;" onfocus="expand(this )" onblur="unexpand(this)">
<option>RMB</option>
<option>USD</option>
<option>credit card</option>
<option>Hong Kong Dollars</option>
<option>HKD</option>
</select>
<span style="color:#ff0000"></div>
</span></td>

エキスパンド、アンエクスパンドともにシンプルなメソッドです。
コピーコード
コードは以下の通りです。

function expand(obj){
$(obj).attr("size","10");
}
function unexpand(obj){
$(obj).attr("size","1");
}

domのフローレイアウトに影響を与えないように、selectの位置をabsoluteに設定します。次に、select のコンテナの位置を relative に設定し、select がそのコンテナに従って配置されるようにします。
ここで注意したいのは、table要素内のselectのコンテナとしてdivを使用することです。table関連要素にposition:relativeを設定することはw3c css標準では不定なので、select要素の位置はff以下のbody要素に直接応じて配置されることになります。
参考
http://www.php-insite.com/autoexpand_select.html ページソースを直接表示する
http://bbs.csdn.net/topics/330158935 lingshuo1993の回答へのコメントを残す