javascript - How can I reset a form with jQuery chosen plugin? - Stack Overflow

admin管理员组

文章数量:1134248

I have a bunch of select elements in a form with which I am using the Jquery Chosen plugin. How can I reset the form? The following does not work:

<input type="reset" />

I have a bunch of select elements in a form with which I am using the Jquery Chosen plugin. How can I reset the form? The following does not work:

<input type="reset" />

• javascript
• jquery
• jquery-plugins
• jquery-chosen

Share Improve this question Follow edited Jul 22, 2020 at 7:54 double-beep 5,4941919 gold badges4040 silver badges4848 bronze badges asked Oct 26, 2011 at 1:26 P HP H 96311 gold badge77 silver badges88 bronze badges 3

• 2 You should change your accepted answer to Jack O'Neill's answer. The other solutions do not work any more. – James Commented Oct 30, 2013 at 12:13
• 1 Please change your accepted ans to Jack O'Neill answere. because the latest version trigger now called :updated – Well Wisher Commented Nov 9, 2013 at 4:40
• 1 @Jame & Well wisher: It's not like we will change all answered questions on this site whenever a plugin updates. The solution was correct at the time. RobertWaddell put a comment on the answer, I believe this is the way to go. – GôTô Commented Jan 2, 2014 at 13:06

Add a comment  | 

10 Answers 10

Sorted by: Reset to default 194

You'll need to reset the value of the field, then trigger the liszt:updated event on the input to get it to update, ive made a fiddle with a working example here.

http://jsfiddle.net/VSpa3/3/

$(".chzn-select").chosen();
$('a').click(function(){
    $(".chzn-select").val('').trigger("liszt:updated");
});​

Since the release of chosen v1.0 the trigger is now called 'chosen:updated'. Anyone using this new version needs to trigger the update using

$(".chosen-select").val('').trigger("chosen:updated");

Since the release of chosen v1.0 the trigger is now called 'chosen:updated'. Anyone using this new version needs to trigger the update using

$(".chosen-select").val('').trigger("chosen:updated");

You could try this:

$('select').chosen('destroy');  

$('select').prop("selectedIndex", -1);   
$('select').chosen();

in order to have reset working naturally use this:

$("input[type='reset'], button[type='reset']").click(function(e){
    e.preventDefault();

    var form = $(this).closest('form').get(0);
    form.reset();

    $(form).find('select').each(function(i, v) {
        $(v).trigger('chosen:updated');
    });
}

None of the previous options work for me. I had to do it like the old school, even using some native javascript, here is the code:

$('#dllSample option').each(function(){
     $(this)[0].selected = false;   
});
$("#dllSample").trigger("chosen:updated");

$("#Your_id").trigger("chosen:updated");

This worked for me

For a more hassle free approach...assuming your inputs are inside <form> tags:

<form>
    <!-- your selects go here and any other input fields -->
    <input type="reset" value="Reset"> 
</form>

This is what I would do:

$("input[type='reset'], button[type='reset']").click(function(e){
      setTimeout(function(){ $("select").trigger("chosen:updated"); }, 50);
});

See fiddle here.

None of the answers here worked for me. Im using chosen select with the multiple attribute. Normal submit form button didnt do the trick either. So i just had a function do this upon click.

//Gets the selected values
var selected = [];
    for (var option of document.getElementById('mySelect').options) {
        if (option.selected) {
            selected.push(option.value);
        }

    }

//Resets the form
document.getElementById('form1').reset();

//Chosen values doesnt get reset, so we do this manually
//Removes the values selected by clicking on the x icon
$link = $('a.search-choice-close');
            var i;
            for (i = 0; i < selected.length; i++) {
                $link[i].click();
            }

Sometimes you have to reset the select that chosen is called on.

I do this

jQuery.fn.chosen_reset = function(n){
  $(this).chosen('destroy');
  $(this).prop('selectedIndex', 0);
  $(this).chosen(n)
}

And call this function like this, with the options as an argument

$('select').chosen_reset({width:'369px'});

In jQuery something like this should work

<input name="Text1" id="something" type="text">

<input type="reset" id="reset_me"/>


$("#reset_me").click(function() { 
$("#something").val("");
});

本文标签： javascriptHow can I reset a form with jQuery chosen pluginStack Overflow