由於前台編程也只是我的業余愛好，所以更加細致的模仿，只能靠大家了。
其實我自己也覺得寫這麼一堆未必有用，但是既然都寫出來了，還是放上來吧，有用沒用讓大家來評價。
浏覽地址：http://www.live-my-life-with-yuyi.com/lab/jquery/form_select/
代碼:
以下是引用片段：
if($.browser.msIE)
$(document).ready(function(){
//對每一個select進行美化
$("select").each(function(){
select_name = $(this).attr("name");
//取得select的高度
width = $(this).width();
//取得input的寬度
input_width = width-17;
//取得絕對坐標
offset = $(this).offset();
//美化的代碼
select_Html = ’<div style="width:’+width+’px;position:absolute;left:’+offset.left+’px;top:’+offset.top+’px"><input type="text" style="width:’+input_width+’px;" autocomlete="off" readonly="true" id="input_’+select_name+’" class="select_input"/><img id="img_’+select_name+’" name="’+select_name+’" class="select_img" src="s.gif" width="17" height="21"></div>’;
//附加到頁面上
$("body").append(select_Html);
$(this).CSS({visibility:"hidden"});
//$(this).CSS("margin","200px");
//取得option的數量
option_num = $("option",$(this)).length;
//option的高度
option_height = option_num * 21 > 200 ? 200 : option_num*21;
//option的寬度
option_width = width;
//option的坐標
option_left = offset.left;
option_top = offset.top+21;
//下拉菜單的美化代碼
option_Html = "<div class=’select_option_div’ id=option_"+select_name+" style=’height:"+option_height+"px;width:"+option_width+"px;position:absolute;top:"+option_top+"px;left:"+option_left+"px;overflow:auto’>";
$(this).find("option").each(function(){
option_Html += "<div class=’select_option’>"+$(this).text()+"</div>";
});
option_Html += "</div>";
//附加到頁面上
$("body").append(option_Html);
//隱藏選項
$("#option_"+select_name).hide();
//設定img id 和 input id
img_id = "#img_"+select_name;
input_id = "#input_"+select_name;
//設定圖片點擊事件
$(img_id).click(function(){
//通過name取得目標id
dest_id = "#option_"+$(this).attr("name");
//取得選項的狀態是打開還是關閉
state = $(dest_id).CSS("display");
//關閉所有的選項
$(".select_option_div").hide();
//開的關，關的開
if(state == "none"){
$(dest_id).show();
}
else{
$(dest_id).hide();
}
});
//input的點擊事件
$(input_id).click(function(){
//取得目標id
dest_id = $(this).attr("id").substr(6);
dest_id = "#option_"+dest_id;
state = $(dest_id).CSS("display");
$(".select_option_div").hide();
if(state == "none"){
$(dest_id).show();
//alert("hello");
}
else{
$(dest_id).hide();
}
});
//設置默認選中的項
obj = document.getElementById(select_name);
input_id = "#input_"+select_name;
$(input_id).val(obj.options[obj.selectedIndex].text);
});
//當點擊選項後的操作
$(".select_option").click(function(){
//取得select id
parent_id = $(this).parent().attr("id");
parent_id = parent_id.substr(7);
input_id = "#input_"+parent_id;
//在input處顯示所選項
$(input_id).val($(this).text());
//操作select選項
obj = document.getElementById(parent_id);
obj.options[obj.selectedIndex].text=$(this).text();
option_id = "#option_"+parent_id;
//選中之後隱藏選項
$(option_id).hide();
});
//對option選項應用鼠標移入移出效果
$(".select_option").hover(function(){$(this).addClass("select_highlight")},function(){$(this).removeClass("select_highlight")});
});
//點擊頁面函數
$(document).click(function(evt){
var evt = evt || window.event; // event object
var target = evt.target || window.event.srcElement; // event target
var t_className = target.className; // event target id
if(t_className == "select_img" || t_className == "select_input" || t_className == "select_option"){
return false;
}
else{
$(".select_option_div").hide();
};
});