讓select在選取/聚焦時列出所有選項目前比較好的處理方式_HTML/Xhtml_網頁製作

在開發中，遇到這樣一個需求情況，因此記錄下來以備用

需求背景

在頁面上使用快捷鍵盤快捷定位到付款方式選擇框（一個下拉式清單）並進行選擇。

技術困難

目前瀏覽器不支援透過程式碼定位下拉清單時就列出其下所有選項，只能透過滑鼠點擊。

在網路上找了些資料後，得出目前比較好的處理方式；

利用select的size屬性，配合盒子佈局的position屬性來實現，具體代碼如下：

複製程式碼

程式碼如下:

付款方式:

人民幣
美元
信用卡
港幣

港幣

expand和unexpand方法都很簡單：

複製程式碼


程式碼如下:

function expand(obj){
$(obj).attr("size","10") ;
}
function unexpand(obj){
$(obj).attr("size","1");
}
把select的position設定為absolute，使其不影響dom的流佈局。再把其容器的position設定為relative，使select根據其容器來定位。 這裡要注意的是在table元素中必須使用div作為select的容器，因為根據w3c的css標準，在table相關元素設定position:relative是未定義的，所以在ff下select元素會直接根據body元素來定位。 參考的資料： http://www.php-insite.com/autoexpand_select.html 直接查看頁面原始碼http://bbs.csdn.net/topics /330158935 留意lingshuo1993的回答