Advanced Search

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.

Expand | Embed | Plain Text

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

You need to login to view comments.