Issue #5 - how to navigate to url on selectbox change event

Issue #1 - Focus issue on iOS safari
roblaplaca · Jul 25, 2013 · 1e255e9 · 1e255e9
1 parent b3c3591
commit 1e255e9
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 9 deletions.
diff --git a/jquery-selectbox-example3.html b/jquery-selectbox-example3.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html>
+	<head>
+		<title>Custom SelectBox</title>
+		<link rel="stylesheet" href="css/jquery.jscrollpane.css" />
+		<link rel="stylesheet" href="css/customSelectBox.css" />
+		<!-- example.css is throwaway code for demoing -->
+		<link rel="stylesheet" href="css/example.css" />
+	</head>
+	<body class="noJS" id="example-1">
+		<script>
+			var bodyTag = document.getElementsByTagName("body")[0];
+				bodyTag.className = bodyTag.className.replace("noJS", "hasJS");
+		</script>
+
+		<h2>Link Select</h2>
+
+		<form method="GET" class="module-link-select" target="_blank">
+			<select class="custom">
+				<option value="">Select a link</option>
+				<option value="http://www.google.com">Google</option>
+				<option value="http://www.yahoo.com">Yahoo</option>
+				<option value="http://www.bing.com">Bing</option>		
+			</select>
+		</form>
+
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
+		<script src="js/jScrollPane.js"></script>
+		<script src="js/jquery.mousewheel.js"></script>
+		<script src="js/SelectBox.js"></script>
+		<script>	
+			$(function() {
+
+				$(".module-link-select").each(function() {
+					var $form = $(this);
+
+					var sb = new SelectBox({
+						selectbox: $form.find("select"),
+						height: 150,
+						width: 200,
+						changeCallback: function(val) {
+							if( val !== "" ) {
+								$form.attr("action", val);
+								$form.submit();	
+							}
+						}
+					});
+				});
+
+			});
+		</script>
+	</body>
+</html>
diff --git a/js/SelectBox.js b/js/SelectBox.js
@@ -7,7 +7,7 @@
  *
  * @author				Rob LaPlaca - rob.laplaca@gmail.com
  * @date				04/05/2010
- * @lastUpdate			01/20/2013 
+ * @lastUpdate			07/25/2013 
  * @dependency			jScrollPane.js			optional
  * 						jquery.mousewheel.js	optional
  * 
@@ -57,12 +57,16 @@
 		}, options);
 
 		var $customSelect, $selectedValue, $selectValueWrap, $selectList, $dl, $options,
+			_useDefaultBehavior = false,
 			_isOpen = false, 
 			_isEnabled = true,
 			_isFocused = false,
 			_selectedValue = "";
 
 		function init() {
+
+			_useDefaultBehavior = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPad/i)) ? true : false;
+
 			var selectId = "";
 			if(typeof cfg.selectbox.attr("id") !== "undefined") {
 				selectId = 'id="select-'+cfg.selectbox.attr("id")+'"';
@@ -100,7 +104,11 @@
 					cfg.selectbox.focus();
 					self.close();
 				} else if(_isEnabled) {
-					self.open();
+					if( _useDefaultBehavior ) {
+						cfg.selectbox.focus();	
+					} else {
+						self.open();
+					}
 				}
 			});
 
@@ -111,11 +119,15 @@
 					if(e.target.tagName.toLowerCase() != "dd") {
 						$target = $target.parents("dd");	
 					}  
+
 					if($target.get(0)) {
-					self.jumpToIndex($target.get(0).className.split(" ")[0].split("-")[1]);
-
-					self.close();
-					cfg.selectbox.focus();
+						self.jumpToIndex($target.get(0).className.split(" ")[0].split("-")[1]);
+
+						self.close();
+
+						if( ! _useDefaultBehavior ) {
+							cfg.selectbox.focus();	
+						}
 					}
 				}				
 			});
@@ -128,6 +140,12 @@
 				$customSelect.removeClass("focused");
 			});
 
+			if( _useDefaultBehavior ) {
+				cfg.selectbox.change(function(e) {
+					_updateValue( $(this).find("option:selected").html() );
+				});
+			}
+
 			cfg.selectbox.keyup(function(e){
 				self.close();
 				$options.each(function(i, itm){		
@@ -150,14 +168,14 @@
 				var $target = $(e.target);
 				if(e.target.tagName.toLowerCase() != "dd") {
 					$target = $target.parents("dd");
-				}								   
-				$target.addClass("hovered");														
+				}   
+				$target.addClass("hovered");
 			});
 
 			$dds.on("mouseout", function(e) {
 				var $target = $(e.target);
 				if(e.target.tagName.toLowerCase() != "dd") {
-					$target = $target.parents("dd");	
+					$target = $target.parents("dd");
 				}
 				$target.removeClass("hovered");
 			});