開発中にこのような需要状況に遭遇したため、将来の参考のために記録しました
要件の背景
ページ上のショートカット キーボード ショートカットを使用して支払い方法を見つけます選択ボックス (ドロップダウン リスト) を選択して選択します。
技術的な問題
現在、ブラウザでは、コードを使用してその下にすべてのオプションをリストするドロップダウン リストの配置はサポートされていません。マウスでのみクリックできます。 。
インターネットで情報を検索した結果、より良い対処方法を思いつきました。
select の size 属性と box レイアウトのposition 属性を使用して実装します。具体的なコードは次のとおりです:
支払い方法:
|
| >
| expand メソッドと unexpand メソッドは両方とも単純です:
function Expand(obj){
$(obj).attr("size","10"); >}
function unexpand(obj){
$(obj ).attr("size","1");
}
選択位置を絶対に設定しますdom のフローレイアウトに影響を与えないようにします。次に、コンテナの位置を相対に設定して、選択がそのコンテナに応じて配置されるようにします。
ここで注意する必要があるのは、テーブル要素の選択コンテナとして div を使用する必要があるということです。これは、w3c の CSS 標準によれば、テーブル関連要素でのposition:relativeの設定が未定義であるためです。 ff select 要素は、body 要素に基づいて直接配置されます。
参考情報：
http://www.php-insite.com/autoexpand_select.html ページのソースコードを直接表示
http://bbs.csdn.net/topics /330158935 lingshuo1993 の回答に注目してください
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
