CODEWITHSUNDEEP
jqueryxhtml
user244394
user244394

Reputation: 13448

Jquery UI: How to change select option back to default?

I am using jquery ui to create my select option menu from this examples

Jquery selectmenu examples

Is there away to to change the select option back to the default value after the user has selected either option1, option2 or option 3 and the value was done outputting/ ie once the event ss completed, it should change back to "choose one..".

<script type="text/javascript"> 
        $(function(){       

            // please note that option.event is always passed as a string, so do not test for true or 1 with if (options.value)
            // see this issue for more information http://github.com/fnagel/jquery-ui/issues#issue/12
            var speedD_first = $('select#speedD_first').selectmenu();       
           // alert(speedD_first[0]);


           // var selVal=$('select#speedD_first').selectmenu("value");
            //alert(selVal);
            $('select').selectmenu({
                change: function(e, object){
                    alert(object.value);
                }
            });

            //$('select').show();
        });     
        $(document).ready(function() {
            $("select#speedD_first").change(function() {
              var selVal=$("select#speedD_first").val();
            //  alert(selVal);
            });

        });
    </script>

<fieldset>
            <label for="speedD_first">Disabled and selected first option by HTML</label>
            <select id="speedD_first">
                <option disabled="disabled" selected="selected">Choose one...</option>
                <option value="option1">Option 1</option>
                <option value="option2">Option 2</option>
                <option value="option3">Option 3</option>
            <select>
        </fieldset>

Upvotes: 0

Views: 1169

Answers (2)

Ruben Infante
Ruben Infante

Reputation: 3135

The jQuery UI documentation talks about a refresh method, but in my testing, it does not seem to work. This is likely due to selectmenu being a non-final jQuery UI component that is still in its planning phase. Instead, calling .selectmenu() again seems work and it is mentioned as the way to change state in the development version documentation.

NOTE: I am using the latest development version (JS / CSS) of the plug-in.

$('select').selectmenu({
    change: function (e) {

        // Do something
        alert('Just to pause');

        // Rever to original value and reset
        $(this).val(0);
        $(this).selectmenu();
    }
});

jsfiddle

Upvotes: 0

charlietfl
charlietfl

Reputation: 171679

You can change the value of the original select, then use refresh method for the widget

Run this in console on demo page:

$('#number').val(3).selectmenu('refresh');

Thus set the value of your default option or empty string if it has no value

Upvotes: 1

Related Questions