Custom Dropdown


/ Published in: jQuery
Save to your folder(s)

Custom dropdown field, replace defaut dropdown style with custom design.
This function does not replace the select field.


Copy this code and paste it in your HTML
  1. /* ------------------------------------------------------------------
  2.   Custom DropDown -------------------------------------------------- */
  3. function closeCurrentDropDown(elem) {
  4. var $current_open = $(".dropdown_b", elem);
  5. $current_open.hide();
  6. $(elem).removeClass("open");
  7. $().unbind("click");
  8. }
  9.  
  10. $.fn.cssDropDown = function () {
  11. return this.each( function() {
  12. var current;
  13.  
  14. $(".container_dropdown", this)
  15. .each(function(){
  16. var $open = $(".dropdown_b", this);
  17. var id = $open.attr("id").replace('drpd_', '');
  18. var $elm = $("#"+ id, this);
  19. var $elm_id = $("#"+ id +"_id", this);
  20.  
  21. if($elm_id.size() > 0){
  22. var $selected = $("li > a[@rel='"+ $elm_id.val()+"']", $open);
  23.  
  24. if($selected.size() > 0){
  25. if ( $elm.is("div")){ $elm.html($selected.html()); }
  26. else{ $elm.attr("readonly", "readonly").val($selected.text()); }
  27. }
  28. }
  29. if(!$open.hasClass("noClick")){
  30. $("li", $open)
  31. .bind("click", function() {
  32. var $a = $("a", this);
  33. if ($elm.is("div")){
  34. $elm.html($a.html());
  35. }else{
  36. $elm.val($a.text());
  37. $elm_id.val($a.attr("rel"));
  38. }
  39. });
  40. }
  41. })
  42. .bind("click", function(e){
  43. var $this = $(this);
  44. var $open;
  45. if(current !== null && current != this){
  46. closeCurrentDropDown(current);
  47. current = null;
  48. }
  49.  
  50. if(!$this.hasClass("open")){
  51. current = this;
  52. $open = $(".dropdown_b", $this);
  53. $this.addClass("open");
  54. $open.show();
  55. $().bind("click", function() {
  56. closeCurrentDropDown(current);
  57. });
  58. }else{
  59. closeCurrentDropDown(current);
  60. current = null;
  61. }
  62. return false;
  63. })
  64. .removeClass("open")
  65. .show();
  66. });
  67. };

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.