jquery UI selectmenu - How to reset dropdown on form reset button

问题

Got a problem with jQuery.selectmenu when i click reset button i would like it to reset like all other fields. any input is refreshed right now, but with this plugin is not refreshing. what to do ?

a bit more details:

<form action="#" name="editform">
    <fieldset>
        <select name="speed" id="speed">
            <option value="Slower">Slower</option>
            <option value="Slow">Slowwwwwwwwww</option>
            <option value="Medium" selected="selected">Medium</option>
            <option value="Fast">Fast</option>
            <option value="Faster">Fasterrrrrrrrrrrrrrrr</option>
        </select>
    </fieldset>
<a class="refForm" href="javascript:document.editform.reset()">Reset</a>
</form>

now when i click reset it doesnt reset the (select) dropdown I want all select fields go back to default with reset button click.

btw.: This is the plugin: Wiki jQuery-ui-selectmenu

Cheers ! Lucas

回答1:

Reset all combobox of the form

$("form .select").selectmenu("index", 0);

回答2:

the only solution working to me:

$('#resetButton').click(function() {
  $("#Service").selectmenu('destroy');
  $("#Service").prop('selectedIndex',0);
  $("#Service").selectmenu();
})';

回答3:

I found that it is as simple as: (replace #mymenu with your selector)

$("#mymenu")[0].selectedIndex = 0;

$("mymenu").selectmenu("refresh");

回答4:

Looking at the demo page:

http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html

I don't see any evidence that it has a reset method. But if it did, I would expect it to be called this way:

$('select#speed').reset();

Note that with the plugin you have to call methods on the jQuery-wrapped select object, not on the whole form.

The .reset() that your JS calls is a built in DOM method. You can use DOM methods to reset the select like this:

getElementById("speed").selectedIndex = 0;

回答5:

You can bind a function on click event of your reset button\trigger instead of binding handler on reset event of a form. The trick is that when you reset the form, original select in it resets to its initial value, so, after the form was resetted, you can get the value of the select and update your custom selectmenu with that value. Doing that allows you to reset custom selectmenu. Here is the code:

$('.refForm').click(function(){
    var $that = $(this),
        select;
    setTimeout(function(){
        $that.closest('form').find('.ui-selectmenu').each(function(){
            select = $(this).prev();
            select.selectmenu("value", select.val());
        })
    }, 0)
})

Function that getting value of the original resetted select is placed inside the setTimeout with zero delay - to make sure that original select will be resetted before function will access it value.

Also note that if option tags has no value attributes specified the code above will not work in IE (7-9 as far as I tested). So you need to specify value for all options.

回答6:

jQuery UI's selectmenu has a refresh property. You should call that:

$('select').selectmenu('refresh');

Of course you want to call that after the reset event has fired on the form, when the original <select> has been reset. There is no 'proper' way to do that (e.g. there is no afterreset event). Of course you can set a timeout (as mentioned before), but that feels hackish. The best/cleanest way I've found to do this is to write your own 'reset' function and call form.reset() in it before you call the refresh as shown above. You could for instance listen for a click on your reset button(s):

// Modify selectors to fit your needs.
$('.resetButton').click(function()
{
    $('#searchForm')[0].reset();
    $('select').selectmenu('refresh');
    return false;
});

I'm returning false to prevent the reset() from being called twice.

回答7:

A little late to the party, however considering that all the other answers are either incorrect or incomplete, I'll throw in my 2 cents!

All you need to do is

$('#speed').val("Slower"); // your default option's value
$('#speed').selectmenu("refresh");

来源：https://stackoverflow.com/questions/6305253/jquery-ui-selectmenu-how-to-reset-dropdown-on-form-reset-button