Custom Drop Down Box - Javascript

$(document).ready(function ()

{

$.fn.hideDropDownLists = function ()

{

var items = $(".dropDownList").find("ul");

items.hide();

$(".dropDownList").removeClass("expaded");

};

//$("html").click(function () {

// $(this).hideDropDownLists();

//});

$(".dropDownList").attr("tabindex", "0");

$(".dropDownList").append("<div class=\"arrow\">V</div>");

$(".dropDownList").click(function () {

var items = $(this).find("ul");

if (items.is(":hidden")) {

var currentVal = $(this).find("input[type=hidden]:first").val();

items.show();

var hiddenli = items.find("li").find("input[value='" + currentVal + "']:first");

$(hiddenli).parent("li").addClass("selectedItem");

try {

$(this).find("ul").scrollTop(0);

$(this).find("ul").scrollTop($(hiddenli).parent("li").position().top);

}

catch(e){}

$(this).addClass("expaded");

}

else {

{

items.hide();

$(this).removeClass("expaded");

}

}

});

$(".dropDownList").keydown(function (e) {

//esc

if (e.keyCode == 27)

{

$(this).click();

e.preventDefault();

e.stopPropagation();

e.cancelBubble = true;

}

//Enter

if (e.keyCode == 13) {

var currentlyHovered = $(this).find('ul').find("li[class='hovered']");

if (currentlyHovered.length == 0) {

$(this).click();

}

else {

$(currentlyHovered[0].parentElement.parentElement).JSDropDownclickItem(currentlyHovered[0]);

}

e.preventDefault();

e.stopPropagation();

e.cancelBubble = true;

return;

}

//Up

if (e.keyCode == 38) {

var items = $(this).find("ul");

if (items.is(":hidden")) {

$(this).click();

e.preventDefault();

e.stopPropagation();

e.cancelBubble = true;

return;

}

var currentlyHovered = $(this).find('ul').find("li.hovered");

if (currentlyHovered.length == 0) {

currentlyHovered = $(this).find('ul').find("li:last");

}

else {

var old = $(currentlyHovered[0]);

if ($(currentlyHovered[0]).prev().length == 0) {

currentlyHovered = $(this).find('ul').find("li:last");

}

else {

currentlyHovered = $(currentlyHovered[0]).prev();

}

old.removeClass("hovered");

old.removeClass("selectedItem");

}

currentlyHovered.addClass("hovered");

e.preventDefault();

e.stopPropagation();

e.cancelBubble = true;

return;

}

//Down

if (e.keyCode == 40) {

var items = $(this).find("ul");

if (items.is(":hidden")) {

$(this).click();

e.preventDefault();

e.stopPropagation();

e.cancelBubble = true;

return;

}

var currentlyHovered = $(this).find('ul').find("li.hovered");

if (currentlyHovered.length == 0) {

currentlyHovered = $(this).find('ul').find("li:first");

}

else {

var old = $(currentlyHovered[0]);

if ($(currentlyHovered[0]).next().length == 0)

{

currentlyHovered = $(this).find('ul').find("li:first");

}

else

{

currentlyHovered = $(currentlyHovered[0]).next();

}

old.removeClass("hovered");

old.removeClass("selectedItem");

}

currentlyHovered.addClass("hovered");

e.preventDefault();

e.stopPropagation();

e.cancelBubble = true;

return false;

}

});

$.fn.JSDropDownclickItem = function (item) {

$(item.parentElement.parentElement).find(".selected").text($(item).text());

$(item.parentElement.parentElement).find("input[type=hidden]:first").val($(item).find("input[type=hidden]").val());

$(item.parentElement.parentElement).find("input[type=hidden]:first").trigger("change");

$(item.parentElement.parentElement).find("ul").visible = false;

$(item.parentElement.parentElement).find("ul").hide();

$(item.parentElement.parentElement).removeClass("expaded");

$(item.parentElement.parentElement).find("ul").find("li").removeClass("selectedItem");

$(item.parentElement.parentElement).find("ul").find("li[class='hovered']").removeClass("hovered");

};

$(".dropDownList").find("ul").hide();

$(".dropDownList").find("ul").find("li").click(function (event)

{

$(this.parentElement.parentElement).JSDropDownclickItem(this);

event.preventDefault();

event.stopPropagation();

}

);

}

);