diff options
| -rw-r--r-- | tests/visual/selectmenu/disabled.html | 8 | ||||
| -rw-r--r-- | tests/visual/selectmenu/option.html | 62 | ||||
| -rw-r--r-- | ui/jquery.ui.selectmenu.js | 28 |
3 files changed, 81 insertions, 17 deletions
diff --git a/tests/visual/selectmenu/disabled.html b/tests/visual/selectmenu/disabled.html index cf979a9ee..b096f95dd 100644 --- a/tests/visual/selectmenu/disabled.html +++ b/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 --> diff --git a/tests/visual/selectmenu/option.html b/tests/visual/selectmenu/option.html new file mode 100644 index 000000000..1f70d0e56 --- /dev/null +++ b/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> diff --git a/ui/jquery.ui.selectmenu.js b/ui/jquery.ui.selectmenu.js index 38688b845..3f56f45fe 100644 --- a/ui/jquery.ui.selectmenu.js +++ b/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 ); |