Permalink
Browse files

simplify button text method, handle persisting option class for multi…

…ple selects
  • Loading branch information...
1 parent 62881f3 commit ce4e3b89c9dd255a16ae351a09f524b2ce393074 @johnbender johnbender committed Apr 9, 2012
Showing with 66 additions and 14 deletions.
  1. +18 −14 js/jquery.mobile.forms.select.js
  2. +28 −0 tests/unit/select/index.html
  3. +20 −0 tests/unit/select/select_core.js
View
32 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") );
});
},
View
28 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>
View
20 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);

0 comments on commit ce4e3b8

Please sign in to comment.