<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
	  $(document).ready(function(){
		  // False Select Functionality
		  $(document).bind('click', function(e) {
				var $clicked = $(e.target);
				if (! $clicked.parents().hasClass("activedropdown"))
					$(".activedropdown").hide();
			});/*This function above checks each click on a page. If click occurred on elements
				outside the dropdown it hides the active select dropdown. Now this works like regular Select element. */

		  // On click show next ul
		  $(".select").click( function () { 
			  $(this).next("ul").addClass('activedropdown').toggle(); //Toggle is used because if you click the dropdown twice the list should dissapear
				return false;
			});
		  // The replacement of the a tag text with with the relevant selected text, Also higlighting of the selected/hovered list item 
		  $(".select_list li").click( function () { // Click event on one of the list items
		  $(this).siblings().removeClass("selected"); // First remove the selected class from previous selection
		  $(this).addClass("selected").parent().prev(".select").text($(this).text()); // Add selected class and to chosen list element and populate the a tag with text
		  $(this).parent().nextAll("select").find("option").val($(this).text()); // Add selected li text value to the hidden select element's option value and whullah!
		  $(this).parent(".activedropdown").hide(); // Hide ul
		});                                  

		  $(".select_list li").hover( // Add and remove highlight to list item with mouse pointer hover
		  function () {
			$(this).addClass("hover"); // Adds hover class
		  }, 
		  function () {
			$(this).removeClass("hover"); // Removes hover class
		  });
		  // End False Select JS
		  
	  });	
	  </script>
