/ Published in: jQuery
Custom dropdown field, replace defaut dropdown style with custom design.
This function does not replace the select field.
This function does not replace the select field.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
/* ------------------------------------------------------------------ Custom DropDown -------------------------------------------------- */ function closeCurrentDropDown(elem) { var $current_open = $(".dropdown_b", elem); $current_open.hide(); $(elem).removeClass("open"); $().unbind("click"); } $.fn.cssDropDown = function () { return this.each( function() { var current; $(".container_dropdown", this) .each(function(){ var $open = $(".dropdown_b", this); var id = $open.attr("id").replace('drpd_', ''); var $elm = $("#"+ id, this); var $elm_id = $("#"+ id +"_id", this); if($elm_id.size() > 0){ var $selected = $("li > a[@rel='"+ $elm_id.val()+"']", $open); if($selected.size() > 0){ if ( $elm.is("div")){ $elm.html($selected.html()); } else{ $elm.attr("readonly", "readonly").val($selected.text()); } } } if(!$open.hasClass("noClick")){ $("li", $open) .bind("click", function() { var $a = $("a", this); if ($elm.is("div")){ $elm.html($a.html()); }else{ $elm.val($a.text()); $elm_id.val($a.attr("rel")); } }); } }) .bind("click", function(e){ var $this = $(this); var $open; if(current !== null && current != this){ closeCurrentDropDown(current); current = null; } if(!$this.hasClass("open")){ current = this; $open = $(".dropdown_b", $this); $this.addClass("open"); $open.show(); $().bind("click", function() { closeCurrentDropDown(current); }); }else{ closeCurrentDropDown(current); current = null; } return false; }) .removeClass("open") .show(); }); };