用JavaScript來美化HTML的select標簽的下拉列表效果_javascript技巧

然后效果一般時這樣的：

美與丑暫且不論...所有html元素中select算是比較坑爹的一個。他讓人抓狂的地方主要是：

不同的瀏覽器顯示的默認下拉框樣子不完全相同
IE下無法手動設置select的高度（這是最坑爹的！），只能靠font-size撐起來
select右側的下拉箭頭是無法使用背景消除的，這就導致無法使用css進行美化
總結起來，解決辦法主要有：

將select隱藏掉，而使用div進行模擬
將select透明度設置為0，然后使用相對定位在下方 加一個長得很像select又美化了的div

隱藏方案一般原理如下：
找到頁面需要處理的select，將其隱藏
根據select的option，創建一個li列表（當然也可以是div），并隱藏。
在select的位置創建一個div，顯示select的值（selected的option）。并使用css對其進行美化，使其看起來像一個select
添加事件，使點擊“select”的時候，顯示li列表。并使用相對定位，讓這個列表顯示在“select”下方
對li列表添加事件，模擬下拉框的選值過程（點擊事件和鍵盤↑↓事件都要模擬）
選值完成后，要將選的值顯示到上方的“select”，并設置真正的select的值
當然，如果你想做的更復雜點，還可以添加選項搜索、多選、多選后的選項刪除等。當時一般原理都跟上面差不多。網上也有很多這樣的插件。但使用網上的插件要注意測試瀏覽器的兼容性，功能越復雜的模擬select，兼容性越不好做

如果，你的程序不需要那么復雜的select，那么設置透明度的第二種方案也許適合你。今天要分享給大家的也是這個方案。
它的原理如下：


找到當前頁面的select，將其透明度設置為0.使其看不見，但是可以點擊并選值
創建一個div，使用相對定位，放置到select下方 ，并通過css控制使其看起來像一個select。為什么一定要放在下方呢？因為這樣，我們可以點擊真正的select，而用戶看起來像是點擊的這個模擬的select，因為真正的select是完全透明的。如果放置在上方，則用戶點擊的是這個模擬的select，真正的select不會展開！！！
設置div的text為select的值
添加事件，使真正的select選值后，將值顯示到模擬的div上


先上代碼吧：

插件代碼運行：

下面是html代碼：

< HTML >
< HEAD >
< TITLE > New Document 
< META NAME = "Generator" CONTENT = "EditPlus" >
< META NAME = "Author" CONTENT = "" >
< META NAME = "Keywords" CONTENT = "" >
< META NAME = "Description" CONTENT = "" >
< script type = text /javascript src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" > 
< script type = text /javascript src = "temp.js" > 
< style >
html {font-family: "宋體";font-size: 12px;line-height: 25px;color: #6F6F6F;}
.dn {display: none;}
select{cursor: pointer;}
input,
select,
textarea,
.selectFix {background: white;border: 1px solid #E0E0E0;hide-focus: expression( this.hideFocus = true ); outline: none;}
.formText,
.selectInput,
.text,
.selectFix{border: 1px solid #CCC;width: 180px;height: 30px;line-height:30px;padding: 0 3px;}
.selectInput {width: 248px; font-size:13px; position: relative; z-index: 2;}
.selectFix{width:248px; background: url(selectBg.png) no-repeat; background-position: right; background-color: #fff; position:absolute; z-index: 1;}


< BODY >
< div id = "main" >
< select id = "sex" class = "selectInput" name = "sex" >
< option value = "0" > 男 
< option value = "1" > 女 





 
 
 
 
 
 
 
 
 

然后，在外部容器顯示的時候，手動調用$("#sex").selectFix()

2、如果容器的顯示或者隱藏是第三方插件控制，修改不方便可考慮下面的方案：
在美化程序中，先判斷select是否隱藏，如果否邏輯不變，如果隱藏，則加入一個timer，循環判斷元素是否被顯示，在其顯示的時候再自動調用fix，然后將timer移除
代碼如下：

運行代碼跟原來的不變。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com