Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Selectmenu: improved value option, added demo file

  • Loading branch information...
commit 4d56732195a9dd2e5e919b1a537a2f73dffa5c41 1 parent 9c43d64
@fnagel fnagel authored
View
8 tests/visual/selectmenu/disabled.html
@@ -121,12 +121,12 @@
<option value="someotherfile">Some other file</option>
</optgroup>
</select>
- <br />
- <button id="disable_select">Toggle disable select</button>
- <button id="disable_option">Toggle disable option</button>
- <button id="disable_optgroup">Toggle disable optgroup</button>
</fieldset>
</form>
+<br />
+<button id="disable_select">Toggle disable select</button>
+<button id="disable_option">Toggle disable option</button>
+<button id="disable_optgroup">Toggle disable optgroup</button>
</div><!-- End demo -->
View
62 tests/visual/selectmenu/option.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Selectmenu - Event functionality</title>
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
+ <script src="../../../jquery-1.6.2.js"></script>
+ <script src="../../../ui/jquery.ui.core.js"></script>
+ <script src="../../../ui/jquery.ui.widget.js"></script>
+ <script src="../../../ui/jquery.ui.position.js"></script>
+ <script src="../../../ui/jquery.ui.button.js"></script>
+ <script src="../../../ui/jquery.ui.menu.js"></script>
+ <script src="../../../ui/jquery.ui.selectmenu.js"></script>
+ <link rel="stylesheet" href="../../../demos/demos.css">
+ <script>
+ $(function() {
+ var mySelectmenu = $('select').selectmenu();
+
+ $("#value").click( function() {
+ mySelectmenu.selectmenu("option", "value", "Faster");
+ });
+
+ $("#dropdown").toggle( function() {
+ mySelectmenu.selectmenu("option", "dropdown", false);
+ }, function() {
+ mySelectmenu.selectmenu("option", "dropdown", true);
+ });
+ });
+ </script>
+ <style>
+ form { margin: 20px 0 0 0 }
+ fieldset { border: 0; }
+ select { width: 200px; }
+ .overflow ul { height: 200px; overflow: auto; }
+ </style>
+</head>
+<body>
+
+<div class="demo">
+
+<form action="#">
+ <fieldset>
+ <label for="speed">Select a speed:</label>
+ <select name="speed" id="speed">
+ <option value="Slower">Slower</option>
+ <option value="Slow">Slow</option>
+ <option value="Medium" selected="selected">Medium</option>
+ <option value="Fast">Fast</option>
+ <option value="Faster">Faster</option>
+ </select>
+ </fieldset>
+</form>
+<br />
+<!-- <button id="dropdown">Toggle dropdown style</button> -->
+<button id="value">Set option value = 'Faster'</button>
+
+</div><!-- End demo -->
+
+
+
+</body>
+</html>
View
28 ui/jquery.ui.selectmenu.js
@@ -49,12 +49,15 @@ $.widget( "ui.selectmenu", {
// quick array of button and menu id's
self.ids = [ selectmenuId + '-button', selectmenuId + '-menu' ];
- // get options
+ // save options
self.items = self.element.find( 'option' );
- // set options
- options.value = self.element[0].value;
- options.disabled = ( self.element.attr( 'disabled' ) ) ? true : false;
+ // set current value
+ if ( options.value ) {
+ self.element[0].value = options.value;
+ } else {
+ options.value = self.element[0].value;
+ }
// catch click event of the label
self.element.bind( 'click.selectmenu', function() {
@@ -82,7 +85,8 @@ $.widget( "ui.selectmenu", {
primary: ( options.dropdown ? 'ui-icon-triangle-1-s' : 'ui-icon-triangle-2-n-s' )
}
});
-
+
+ // wrap and insert new button
self.newelementWrap = $( options.wrapperElement )
.append( self.newelement )
.insertAfter( self.element );
@@ -167,6 +171,7 @@ $.widget( "ui.selectmenu", {
id: self.ids[1]
});
+ // wrap list
self.listWrap = $( options.wrapperElement )
.addClass( self.widgetBaseClass + '-menu' )
.css( "width", ( options.dropdown ) ? self.element.width() : self.element.width() - options.iconWidth )
@@ -176,6 +181,7 @@ $.widget( "ui.selectmenu", {
self._initSource();
self._renderMenu( self.list, options.source );
+ // init menu widget
self.list
.data( 'element.selectelemenu', self.element )
.menu({
@@ -185,7 +191,7 @@ $.widget( "ui.selectmenu", {
if ( item.index != self.element[0].selectedIndex ) flag = true;
- self._setSelected( event, item );
+ self._setOption( "value", item.value );
item.element = self.items[ item.index ];
self._trigger( "select", event, { item: item } );
@@ -331,12 +337,6 @@ $.widget( "ui.selectmenu", {
return this.list.find( "li" ).not( '.ui-selectmenu-optgroup' ).eq( this.element[0].selectedIndex );
},
- _setSelected: function( event, item ) {
- this.newelement.children( '.ui-button-text' ).text( item.label );
- this.element[0].selectedIndex = item.index;
- this.options.value = item.value;
- },
-
_toggle: function( event ) {
if ( this.opened ) {
this.close( event );
@@ -347,11 +347,13 @@ $.widget( "ui.selectmenu", {
_setOption: function( key, value ) {
this._super( "_setOption", key, value );
+
if ( key === "appendTo" ) {
this.listWrap.appendTo( $( value || "body", this.element[0].ownerDocument )[0] );
}
- if ( key === "value" && value) {
+ if ( key === "value" && value !== undefined ) {
this.element[0].value = value;
+ this.newelement.children( '.ui-button-text' ).text( this.items.eq( this.element[0].selectedIndex ).text() );
}
if ( key === "disabled" ) {
this.newelement.button( "option", "disabled", value );
Please sign in to comment.
Something went wrong with that request. Please try again.