Bug with jquery and hidden elements

README.md

@@ -0,0 +1,18 @@
+Additional information
+=============
+
+If you want to customize a multi-select you only have to add an optional class like this (for example):
+
+// This is a multi-select
+command(
+if ($('select[multiple="multiple"]').length > 0){
+  customCombo($('select[multiple="multiple"]'),'multi-select');
+})
+
+
+** It's prepared to be showed inside hidden elements (perfect for filter elements) **
+This is a jquery bug. It's impossible to set height and width if it's inside a hidden element. 
+
+I've changed plugin to allow this.
+
+Any question: [@raulbleon](http://twitter.com/raulbleon)

jquery.stylish-select.js

@@ -81,6 +81,7 @@
 
 	$.fn.sSelect = function(options)
 	{
+
 		return this.each(function()
 		{
 			var defaults = {
@@ -89,7 +90,14 @@
 				ddMaxHeight:    '', //set css max-height value of dropdown
 				containerClass: '' //additional classes for container div
 			};
-
+
+      var elToShow = $(this).parents(":hidden:last");
+
+  		if (elToShow.html() != null && elToShow.html().trim()){ // not empty
+        var hideElement = 1;
+        elToShow.show();
+  		}
+
 			//initial variables
 			var opts = $.extend(defaults, options),
 			$input = $(this),
@@ -107,19 +115,23 @@
 
 			//added by Justin Beasley
 			$(this).data('ssOpts',options);
-
+
+      // If it's a multiselect combo
+      var multiSelect = $containerDiv.hasClass('multi-select');
+
 			//build new list
 			$containerDiv.insertAfter($input);
 			$containerDiv.attr("tabindex", $input.attr("tabindex") || "0");
-			$containerDivText.prependTo($containerDiv);
+			$containerDivText.prependTo($containerDiv);			
 			$newUl.appendTo($containerDiv);
 			$newUl.wrap($containerDivWrapper);
 			$containerDivWrapper = $newUl.parent();
 			$input.hide();
 
 			//added by Justin Beasley (used for lists initialized while hidden)
 			$containerDivText.data('ssReRender',!$containerDivText.is(':visible'));
-
+
+
 			//test for optgroup
 			if ($input.children('optgroup').length == 0)
 			{
@@ -134,9 +146,17 @@
 					{
 						opts.defaultText = option;
 						currentIndex = prevIndex = i;
+
 					}
-					$newUl.append($('<li><a href="JavaScript:void(0);">'+option+'</a></li>').data('key', key));
-
+
+					// if it's selected
+					if (currentIndex != i) {
+            $newUl.append($('<li><a href="JavaScript:void(0);">'+option+'</a></li>').data('key', key));
+					}else {
+					  $newUl.append($('<li><a class="hiLite" href="JavaScript:void(0);">'+option+'</a></li>').data('key', key));
+					}
+
+
 				});
 				//cache list items object
 				$newLi = $newUl.children().children();
@@ -172,23 +192,33 @@
 				$newLi = $newUl.find('ul li a');
 			}
 
-			//get heights of new elements for use later
+			// get heights of new elements for use later					
 			var newUlHeight = $newUl.height(),
 			containerHeight = $containerDiv.height(),
 			newLiLength     = $newLi.length;
 
-
+      if (hideElement) elToShow.hide();
+
 			//check if a value is selected
 			if (currentIndex != -1)
 			{
-				navigateList(currentIndex);
+				if (!multiSelect) navigateList(currentIndex);
+				else {
+
+          $input.find('option :selected').each(function(value){
+                     $newLi.eq(value+1).toggleClass('hiLite');
+                   });
+
+          updateDivText();
+
+				}
 			}
 			else
 			{
 				//set placeholder text
 				$containerDivText.text(opts.defaultText);
 			}
-
+      
 			//decide if to place the new list above or below the drop-down
 			function newUlPos()
 			{
@@ -201,7 +231,9 @@
 				{
 					newUlHeight = parseInt(opts.ddMaxHeight);
 				}
-
+
+
+
 				containerPosY = containerPosY-scrollTop;
 				if (containerPosY+newUlHeight >= docHeight)
 				{
@@ -264,13 +296,16 @@
 					newUlPos();
 				}
 
-				//hide all menus apart from this one
-				$('.SSContainerDivWrapper')
-				.not($(this).next())
-				.hide()
-				.parent()
-				.css('position', 'static')
-				.removeClass('newListSelFocus');
+				if (!multiSelect) {
+  				//hide all menus apart from this one
+  				$('.SSContainerDivWrapper')
+  				.not($(this).next())
+  				.hide()
+  				.parent()
+  				.css('position', 'static')
+  				.removeClass('newListSelFocus');
+
+				}
 
 				//show/hide this menu
 				$containerDivWrapper.toggle();
@@ -309,7 +344,8 @@
 				//remove all hilites, then add hilite to selected item
 				prevented = true;
 				navigateList(currentIndex, true);
-				closeDropDown();
+
+				if (!multiSelect) closeDropDown();
 			});
 
 			$newLi.bind('mouseenter.sSelect',
@@ -335,30 +371,54 @@
 				}
 				else
 				{
-					$newLi.removeClass('hiLite')
-					.eq(currentIndex)
-					.addClass('hiLite');
-
-					var text = $newLi.eq(currentIndex).text(),
-					val = $newLi.eq(currentIndex).parent().data('key');
-
-					try
-					{
-						$input.val(val)
-					}
-					catch(ex)
-					{
-						// handle ie6 exception
-						$input[0].selectedIndex = currentIndex;
-					}
-
-					$containerDivText.text(text);
-
+				  if (!multiSelect) {
+
+  					$newLi.removeClass('hiLite')
+  					.eq(currentIndex)
+  					.addClass('hiLite');
+
+  					var text = $newLi.eq(currentIndex).text(),
+  					val = $newLi.eq(currentIndex).parent().data('key');
+
+  					try
+  					{
+              $input.val(val);
+  					}
+  					catch(ex)
+  					{
+  						// handle ie6 exception
+  						$input[0].selectedIndex = currentIndex;
+  					}
+
+  					$containerDivText.text(text);
+
+				  } else {
+
+            if ($newLi.eq(currentIndex).hasClass('hiLite')){
+
+              $input.find('option[value='+(currentIndex+1)+']').removeAttr("selected");
+
+            }else {
+              var exists = false;
+              $input.find('option[value='+(currentIndex+1)+']').attr("selected","selected");
+            }
+
+            $newLi.eq(currentIndex).toggleClass('hiLite');				  
+
+          }
+
 					//only fire change event if specified
 					if(fireChange == true)
 					{
 						prevIndex = currentIndex;
 						$input.change();
+
+						if (!multiSelect){
+              $containerDivText.text(text);  
+            }else {
+             updateDivText();
+            }
+
 					}
 
 					if ($containerDivWrapper.is(':visible'))
@@ -476,6 +536,20 @@
 				navigateList(currentIndex);
 			}
 
+      function updateDivText(){
+         var elementsSelected = $newUl.find('.hiLite').length;
+          if (elementsSelected == 0) {
+            $containerDivText.text('Please select');
+            // $input.find(':selected').removeAttr('selected');
+          }
+          else if (elementsSelected == 1) {
+            text = $newUl.find('.hiLite').html();
+            $containerDivText.text(text);    
+          }else {
+            $containerDivText.text(elementsSelected + ' seleccionados');
+          }
+      }
+
 			$containerDiv.bind('click.sSelect',function(e)
 			{
 				e.stopPropagation();
@@ -500,7 +574,7 @@
 
 				if ($containerDivWrapper.is(':visible'))
 				{
-					closeDropDown(false, true);
+					closeDropDown(false);// , true);
 				}
 				else
 				{

multi-select.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+    <head>
+        <title>jQuery Stylish Select 0.4.5 plugin examples</title>
+        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
+        <meta http-equiv="Content-Style-Type" content="text/css" />
+
+        <link rel="stylesheet" type="text/css" href="stylish-select.css" />
+
+        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
+        <script src="jquery.stylish-select.js" type="text/javascript"></script>
+
+        <script type="text/javascript">
+            $(function(){
+
+                $('#my-dropdown-multiple').sSelect({ddMaxHeight: '150px',containerClass: 'multi-select',defaultText:'Select multiple'});
+
+            });
+        </script>
+
+        <style type="text/css">
+            body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}
+            .selCont {clear:both; margin-bottom:20px; padding-bottom:40px; float:left; border-bottom:dotted 1px #000; width:600px;}
+        </style>
+
+    </head>
+    <body>
+        <h1>Stylish Select 0.4.5 - @raulbarrosoleon</h1>
+        <a href="https://github.com/rabarroso/Stylish-Select">Get latest source code from GitHub</a>
+        <h2>Usage</h2>
+        <p>First, include the stylesheet, jQuery and the stylish select .js file in your html head tag</p>
+        <p>The plugin can be used to replace any select with the following:</p>
+        <pre class="brush: javascript">
+    $(document).ready(function(){
+    $('#my-dropdown').sSelect({ddMaxHeight: '150px',containerClass: 'multi-select',defaultText:'Select multiple'});
+        // #my-dropdown === select[multiple="multiple"]
+    });
+        </pre>
+        <div class="selCont">
+            <h2>Simplest example, with multiselect</h2>
+            <p>You can use the alphabetical and arrow keys to navigate the list as you would a browser default select.</p>
+
+            <select multiple="multiple" id="my-dropdown-multiple" name="tipo_inmueble[]" class="">
+                <optgroup label="Inmueble Residencial" id="tipo_inmueble_residencial">
+                  <option value="PISO">Piso</option>
+                  <option value="LOFT">Loft</option>
+                <option value="ATICO">Ático</option>
+                  <option value="CHALET">Chalet</option>
+                  <option value="DUPLEX">Dúplex</option>
+                  <option value="ESTUDIO">Estudio</option>
+                </optgroup>
+                <optgroup label="Otro Inmueble" id="tipo_inmueble_otro">
+                  <option value="OFICINA">Oficina</option>
+                  <option value="EDIFICIO">Edificio</option>
+                  <option value="GARAJE">Garaje</option>
+                  <option value="LOCAL">Local</option>
+                  <option value="NAVE">Nave</option>
+                  <option value="DESPACHO">Despacho</option>
+                  <option value="SALON ACTOS">Salón de actos</option>
+                  <option value="HOTEL">Hotel</option>
+                  <option value="PARCELA">Parcela</option>
+                </optgroup>
+              </select>
+        </div>        
+    </body>
+</html>