simplify button text method, handle persisting option class for multiple selects

Author: johnbender

js/jquery.mobile.forms.select.js

@@ -100,7 +100,6 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
 
 			// TODO values buttonId and menuId are undefined here
 			button = this.button
-				.text( $( this.select[ 0 ].options.item( selectedIndex ) ).text() )
 				.insertBefore( this.select )
 				.buttonMarkup( {
 					theme: options.theme,
@@ -113,6 +112,8 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
 					mini: mini
 				});
 
+		this.setButtonText();
+
 		// Opera does not properly support opacity on select elements
 		// In Mini, it hides the element, but not its text
 		// On the desktop,it seems to do the opposite
@@ -198,21 +199,24 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
 	},
 
 	setButtonText: function() {
-		var self = this, selected = this.selected();
-
-		this.button.find( ".ui-btn-text" ).html( function() {
-
-			if ( !self.isMultiple ) {
-				return $( document.createElement("span") )
-					.addClass( self.select.attr("class") )
-					.addClass( selected.attr("class") )
-					.text( selected.text() );
+		var self = this,
+			selected = this.selected(),
+			text = this.placeholder,
+			span = $( document.createElement("span") );
+
+		this.button.find( ".ui-btn-text" ).html(function() {
+			if ( selected.length ) {
+				text = selected.map(function() {
+					return $( this ).text();
+				}).get().join( ", " );
+			} else {
+				text = self.placeholder;
 			}
 
-			//TODO: apply the span as above to preserve the css-class of the original select
-			return selected.length ? selected.map( function() {
-				return $( this ).text();
-			}).get().join( ", " ) : self.placeholder;
+			// TODO possibly aggregate multiple select option classes
+			return span.text( text )
+				.addClass( self.select.attr("class") )
+				.addClass( selected.attr("class") );
 		});
 	},
 

tests/unit/select/index.html

@@ -385,6 +385,34 @@ <h2 id="qunit-userAgent"></h2>
 	<select name="select-disabled-enhancetest" id="select-disabled-enhancetest" disabled="disabled" data-nstest-native-menu="false">
 		<option value="overnight">disabled enhance test</option>
 	</select>
+
+	<select name="select-preserve-option-class" id="select-preserve-option-class">
+		<option value="standard" class="foo" selected>Standard: 7 day</option>
+		<option value="rush">Rush: 3 days</option>
+		<option value="express">Express: next day</option>
+		<option value="overnight">Overnight</option>
+	</select>
+
+	<select name="select-preserve-option-class-multiple" id="select-preserve-option-class-multiple" multiple>
+		<option value="standard" class="foo" selected>Standard: 7 day</option>
+		<option value="rush">Rush: 3 days</option>
+		<option value="express">Express: next day</option>
+		<option value="overnight">Overnight</option>
+	</select>
+
+	<select name="select-aggregate-option-text" id="select-aggregate-option-textxb" multiple>
+		<option value="standard" selected>Standard: 7 day</option>
+		<option value="rush" selected>Rush: 3 days</option>
+		<option value="express">Express: next day</option>
+		<option value="overnight">Overnight</option>
+	</select>
+
+	<select name="select-default-option-text" id="select-default-option-text">
+		<option value="standard">Standard: 7 day</option>
+		<option value="rush">Rush: 3 days</option>
+		<option value="express">Express: next day</option>
+		<option value="overnight">Overnight</option>
+	</select>
 </div>
 
 

tests/unit/select/select_core.js

@@ -384,4 +384,24 @@
 		var menu = $(".ui-selectmenu").not( ".ui-selectmenu-hidden" );
 		ok( menu.text().indexOf("disabled enhance test") > -1, "the right select is showing" );
 	});
+
+	test( "selected option 1classes are persisted to the button text", function() {
+		var $select = $( "#select-preserve-option-class" ),
+			selectedOptionClasses = $select.find( "option:selected" ).attr( "class" );
+
+		deepEqual( $select.parent().find( ".ui-btn-text > span" ).attr( "class" ), selectedOptionClasses );
+	});
+
+	test( "multiple select option classes are persisted from the first selected option to the button text", function() {
+		var $select = $( "#select-preserve-option-class-multiple" ),
+			selectedOptionClasses = $select.find( "option:selected" ).first().attr( "class" );
+
+		deepEqual( $select.parent().find( ".ui-btn-text > span" ).attr( "class" ), selectedOptionClasses );
+	});
+
+	test( "multple select text values are aggregated in the button text", function() {
+		var $select = $( "#select-aggregate-option-text" );
+
+		deepEqual( "Standard: 7 day, Rush: 3 days", $select.parent().find( ".ui-btn-text" ).text() );
+	});
 })(jQuery);