現時点では、selected/focused_HTML/Xhtml_Web ページ作成時にすべてのオプションを選択リストにする方が良い方法です。

開発中にこのような需要状況に遭遇したため、将来の参考のために記録しました

要件の背景

ページ上のショートカット キーボード ショートカットを使用して支払い方法を見つけます選択ボックス (ドロップダウン リスト) を選択して選択します。

技術的な問題

現在、ブラウザでは、コードを使用してその下にすべてのオプションをリストするドロップダウン リストの配置はサポートされていません。マウスでのみクリックできます。 。

インターネットで情報を検索した結果、より良い対処方法を思いつきました。

select の size 属性と box レイアウトのposition 属性を使用して実装します。具体的なコードは次のとおりです:

コードをコピー

コードは次のとおりです:

支払い方法:

>

RMB
USD
クレジットカード
;HKD





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 の回答に注目してください

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。