Adding first files

It replaces the select with a text box and gathers the options into spans, but still doesn't display the options
tkellogg · Sep 1, 2011 · 95df9c2 · 95df9c2
commit 95df9c2
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+*.swp
diff --git a/comboEditable.js b/comboEditable.js
@@ -0,0 +1,35 @@
+(function($) {
+
+	$.fn.comboEditable = function(opts) {
+		var name = this.attr('name');
+		var selectedValue = undefined, selectedText = undefined;
+		var data = $.map(this.find('option'), function(x) { 
+			if (this.selected) {
+				selectedValue = this.value;
+				selectedText = this.innerHTML;
+			}
+
+			return '<span data-value="' + this.value + '" ' +
+				+ (this.selected ? 'selected' : '') + '>' 
+				+ this.innerHTML + '</span>';
+		});
+
+		if (!selectedText) {
+			selectedValue = this.find('option').first().val();
+			selectedText = this.find('option').first().text();
+		}
+
+		var elements = '';
+		$.each(data, function(x) { elements += x; });
+
+		var $ret = $('<div/>');
+		$ret.append('<input type="text" value="' + selectedText + '" />');
+		var $text = $ret.find(':text');
+		$ret.append('<input type="hidden" value="' + selectedValue + '" name="'+name+'" />');
+		var $value = $ret.find(':hidden');
+
+		this.replaceWith($ret);
+		return $ret;
+	}
+
+})(jQuery);
diff --git a/index.html b/index.html
@@ -0,0 +1,19 @@
+<html>
+<head>
+	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+	<script type="text/javascript" src="comboEditable.js"></script>
+	<script type="text/javascript">
+		$(function() {
+			$('#demo1').comboEditable();
+		});
+	</script>
+</head>
+<body>
+	<div id="main">
+		<select id="demo1">
+			<option>apples</option>
+			<option>oranges</option>
+		</select>
+	</div>
+</body>
+</html>