var $j= jQuery.noConflict(); 
try { document.execCommand('BackgroundImageCache', false, true); } catch (e) { }; (function($j) { $j.fn.ylDropDownList = function(o) { o = $j.extend({ arrowUrl: "images/select_bg.gif", arrowWidth: 22, arrowHeight: 21, borderColor: "#afcbe8", dropDownListHeight: 200, hoverColor: "#b0d7ff", currItemAddStyle: true }, o || {}); var ul, lis, currItem = $j("<div  />"), arrowHeight = parseInt(o.arrowHeight), arrowWidth = parseInt(o.arrowWidth), borderColor = o.borderColor, select = $j(this).hide(), options = $j("option", select), optionsSize = options.size(), dropDownListHeight = optionsSize * arrowHeight > parseInt(o.dropDownListHeight) ? parseInt(o.dropDownListHeight) : optionsSize * arrowHeight, getListItem = function(option) { var currText = option.text(), currClass = $j.trim(option.attr("class")), currStyle = $j.trim(option.attr("style")); return $j("<div   />").text(currText).addClass(currClass).attr("style", currStyle); }, getSelectedItem = function() { return $j("option:selected", select); }, getListItems = function() { var $jul = $j("<ul class='ylDropDownUl' tabindex='0'  />"); options.each(function() { var li = $j("<li />"), option = $j(this); li.append(getListItem(option)); $jul.append(li); }); ul = $jul; lis = $j("li", ul); return $jul; }, setCurrItem = function() { currItem.empty(); if (o.currItemAddStyle) { currItem.append(getListItem(getSelectedItem())); } else { currItem.text(getSelectedItem().text()); } }, createElem = function() { select.wrap("<div  />"); select.after(getListItems()); select.after(currItem); setCurrItem(); }, setElem = function() { currItem.css({ "display": "inline-block", "padding": "0 3px","background-color":"#ffffff", "background-image": "url(" + o.arrowUrl + ")", "line-height": arrowHeight + "px", "background-repeat": "no-repeat", "background-position": "right top", "z-index": "1000", "border": "1px solid " + borderColor }).height(arrowHeight); ul.css({ "position": "absolute", "height": dropDownListHeight + "px", "line-height": arrowHeight + "px", "border": "1px solid " + borderColor, "border-top": "0", "padding": "0", "margin": "0", "list-style": "none", "background-color": "#fff", "z-index": "1001", "white-space": "nowrap", "overflow": "hidden", "overflow-y": "auto" }); select.parent().css({ "display": "inline-block", margin: "0 2px" }).height(25); var width = ul.width() + 42; ul.hide(); if ($j.browser.msie && ($j.browser.version == 7 || $j.browser.version == 6)) { select.parent().css({ "display": "inline", "zoom": "1", "vertical-align": "middle" }) }; lis.css({ "padding-left": "4px", "padding-right": "22px", "line-height": arrowHeight + "px" }).height(arrowHeight); currItem.width(width); ul.width(width + 6); }, setScrollTop = function(index) { var visibleNum = parseInt(dropDownListHeight / arrowHeight); ul.scrollTop((index - visibleNum + 1) * arrowHeight); }, showUl = function() { $j(".ylDropDownUl").hide(); var index = options.index(getSelectedItem()); lis.css("background-color", "transparent"); lis.eq(index).css("background-color", o.hoverColor); ul.show(); ul.focus(); setScrollTop(index); }, hideUl = function() { ul.hide(); }, toggleUl = function() { if (ul.css("display") == "none") { showUl(); } else { hideUl(); } }, setScroll = function(step) { var index = options.index(getSelectedItem()); index = index + step; if (index == -1) index = optionsSize - 1; currIndex = index % optionsSize; lis.eq(currIndex).mouseover(); options.eq(currIndex).attr("selected", true); setScrollTop(currIndex + 1); setCurrItem(); }, bindEvents = function() { $j("html").click(function() { hideUl(); }); currItem.click(function(event) { event.stopPropagation(); toggleUl(); }).keydown(function(event) { switch (event.keyCode) { case 40: event.preventDefault(); showUl(); break; } }); ul.click(function(event) { event.stopPropagation(); }).keydown(function(event) { switch (event.keyCode) { case 38: event.preventDefault(); setScroll(-1); break; case 40: event.preventDefault(); setScroll(1); break; case 9: case 13: case 27: hideUl(); break; } }); lis.click(function(event) { event.stopPropagation(); var index = lis.index($j(this)); options.eq(index).attr("selected", true); setCurrItem(); hideUl(); select.change(); }).mouseover(function() { lis.css("background-color", "transparent"); $j(this).css("background-color", o.hoverColor); }); }; createElem(); setElem(); bindEvents(); return $j(this); }; })(jQuery);