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

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

WBOY
發布: 2016-05-16 16:39:36
原創
1395 人瀏覽過

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

需求背景

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

技術困難

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

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

利用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的回答
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板