jquery_jquery를 기반으로 하는 웹 페이지 SELECT 드롭다운 상자 미화 코드

="" onchange= "alert(this.value)" id="select1">
옵션 1 <옵션 값= "2">옵션 2
<옵션 값="3">옵션 3
<이름 선택 ="" id= "select2">
<옵션 값="1">옵션 31
<옵션 값="2">옵션 32 ><옵션 값 ="3">33개 선택




selectCss.css 및 selectCss.js가 포함된 기본 파일

selectCss.js 파일 코드:

(함수($){
함수 hideOptions(속도){
if(speed.data){speed=speed.data}
if($(document).data(" nowselectoptions"))
{
$($(document).data("nowselectoptions")).slideUp(속도);
$($(document).data("nowselectoptions")).prev ("div").removeClass("tag_select_open");
$(document).data("nowselectoptions",null)
$(document).unbind("click",hideOptions); $(document).unbind("keyup",hideOptionsOnEscKey);
}
}
function hideOptionsOnEscKey(e){
var myEvent = e || window.event; myEvent.keyCode;
if(keyCode==27)hideOptions(e.data);
}
function showOptions(speed){
$(document).bind("click",speed, hideOptions);
$(document).bind("keyup",hideOptionsOnEscKey)
$($(document).data("nowselectoptions")).slideDown(speed); $(document).data("nowselectoptions")).prev("div").addClass("tag_select_open")
}

$.fn.selectCss=function(_speed){
$(this).each(function(){
var speed=_speed||"fast";
if($(this).data("cssobj")){
$($( this).data("cssobj")).remove();
}
$(this).hide();
var divselect = $("").insertAfter(this).addClass("tag_select");
$(this).data("cssobj",divselect);
var divoptions = $("

").insertAfter(divselect).addClass("tag_options").hide();
divselect.click(function(e){
if($($(document).data("nowselectoptions")).get(0) != $(this).next("ul"). get(0)){
hideOptions(speed);
}
if(!$(this).next("ul").is(":visible"))
{
e.stopPropagation();
$(document).data("nowselectoptions",$(this).next("ul"))
showOptions(speed)
}
} );
divselect.hover(function(){
$(this).addClass("tag_select_hover");
}
,
function(){
$(this).removeClass ("tag_select_hover")
});
$(this).change(function(){
$(this).nextAll("ul").children("li:eq(" $(this)[0].selectedIndex ")") .addClass("open_selected").siblings().removeClass("open_selected")
$(this).next("div").html($(this).children("option:eq(" $ (this)[0].selectedIndex ")").text())
});
$(this).children("option").each(function(i){
var lioption= $("

").html($(this). text()).attr("title",$(this).attr("title")).appendTo(divoptions)
if($(this).attr("selected")){
lioption.addClass("open_selected");
divselect.html($(this).text())
}
lioption.data("option",this); (function(){
lioption.data("option").selected=true;
$(lioption.data("option")).trigger("change",true)
});
lioption.hover(
function(){$(this).addClass("open_hover");},
function(){ $(this).removeClass("open_hover"); }
)
});
});
}
})(jQuery);



selectCss.Css 文件代码:

ul.tag_options{위치:absolute;margin:0;list-style:none;배경:#fff;padding:0 0 1px; 여백:0;너비:162px ; 높이:100px; 오버플로:숨김; 오버플로-y:자동; 글꼴 크기:12px; 여백-왼쪽:10px; 커서:포인터; z-index:1000 }
ul.tag_options li{배경:#fff; 디스플레이:블록;너비:140px;패딩:0 10px;높이:20px;텍스트 장식:없음;라인 높이:20px;색상:#000; 글꼴 두께:일반; 글꼴 크기:12px}
ul.tag_options li.open_hover{배경:#0000ff;color:#000; 글꼴 두께:일반; 글꼴 크기:12px}
ul.tag_options li.open_selected{배경:#ccc; 글꼴 크기:12px;글꼴 두께:굵게; }


selectbg.jpg 사진: