Reset select menu that is styled as

Question

once I submit a form I want to reset it. Everything is resetting except the select menu. I have tried this:

 const catDrop = document.getElementById('category');
 catDrop.selectedIndex = 0;

In the code, it looks like a normal option:

          <form id="add-listing">
            <div class="col-lg-12">
                <div id="add-listing">
                    <div class="add-listing-section">
                        <div class="add-listing-headline">
                            <h3>Basic Information</h3>
                        </div>
                        <div class="row with-forms">
                            <div class="col-md-12">
                                <h5>Item Name <i class="tip" data-tip-content=""></i></h5>
                                <input class="search-field" type="text" name="title" id="title" />
                            </div>
                        </div>
                        <div class="row with-forms">
                            <div class="col-md-12">
                                <h5>Category</h5>
                                <select class="chosen-select-no-single" name="category" id="category">
                                    <option value="0">Select Category</option>
                                    <% for (const categories of cats) { %>
                                    <option value="<%= categories.catName %>">
                                        <%= categories.catName %>
                                    </option>
                                    <% } %>
                                </select>
                            </div>
                        </div>
                        <div class="row with-forms">
                                <input type="file" name="files" id="image" data-fileuploader-limit="3" data-fileuploader-maxSize="5" data-fileuploader-extensions="jpg, png, jpeg">
                        </div>
                        <div class="row with-forms">
                            <div class="col-md-12">
                                <h5>Description</h5>
                                <textarea class="WYSIWYG" name="description" cols="40" rows="3" id="description"
                                    spellcheck="true"></textarea>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="_csrf" value="<%= csrfToken %>" id="csrf">
                    <button type="submit" class="button preview addItem">Add Item <i class="fa fa-arrow-circle-right"></i></button>
                    <div class="error"></div>
                    <div class="successmsg"></div>
                </div>
            </div>
        </form>

But it does not reset the select menu. When taking a look in console what it looks like, it seems that it is styled as an unordered list with list items like this:

<select class="chosen-select-no-single" name="category" id="category" style="display: none;">
 <option value="0">Select Category</option>
 <option value="Stuff">
  Stuff
</option>                                        
</select>

 <div
  class="chosen-container chosen-container-single chosen-container-single-nosearch chosen-container-active"
  style="width: 100%;"
  title=""
  id="category_chosen"
>
  <div class="chosen-drop">
    <div class="chosen-search">
      <input type="text" autocomplete="off" readonly="" />
    </div>
    <ul class="chosen-results">
      <li class="active-result" data-option-array-index="0" style="">
        Select Category
      </li>
      <li class="active-result" data-option-array-index="11" style="">
        Stuff
      </li>
    </ul>
  </div>
</div>

This is the item I want to set it back to once the form has submitted.

you are probably using a `plugin` please add that `plugin` in the tags. So, the right people can help.. — vikscool, Jan 22 '19 at 08:19
you are probably using `jQuery-chosen` library have a look at [Chosen select an option by default with jQuery](https://stackoverflow.com/a/9161115/2417602) — vikscool, Jan 22 '19 at 08:29
@user8463989 and where is the function for submit? Is it through ajax? or where are you writing the code to reset the select — brk, Jan 22 '19 at 08:30
Looks like this uses https://harvesthq.github.io/chosen/ ? Then you need to call `.trigger("chosen:updated");`after setting the select field value. https://harvesthq.github.io/chosen/#change-update-events — misorude, Jan 22 '19 at 08:30
do you know what plugin are you using for this select field? as you can see, you `` probably resets but it doesn't trigger a change to your plugin to change the content of `
` if you know what triggers your plugin, just do that manually for first value in `
I honestly don't know if it uses a plugin and what it is. I will try dig around to find out... — user8463989, Jan 22 '19 at 08:30
@brk, I am using axios to submit the form and in my then() block I am showing the success message and trying to reset the form. All the other fields reset correctly. `.then(response => { document.getElementById('add-listing').reset(); const catDrop = document.getElementById('category'); catDrop.selectedIndex = 0;` — user8463989, Jan 22 '19 at 08:32
try adding this `$("#category").trigger("chosen:updated");` after `catDrop.selectedIndex = 0;` — fila90, Jan 22 '19 at 08:34
I think one of these comments is correct here as it looks like the plugin is called CHOSEN — user8463989, Jan 22 '19 at 08:35
@fila90, is there a javascript alternative? I don't want to mix my vanilla javascript with jQuery — user8463989, Jan 22 '19 at 08:36
@misorude, sorry, I see you also posted this. So many comments all at once, I missed some! — user8463989, Jan 22 '19 at 08:39
no idea how plugin works but it probably uses custom events, you can try a fire `chosen:update` event with this https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent but not sure will it work. good luck `catDrop.dispatchEvent("chosen:updated");` at the end of the day, you're using jQuery plugin, so don't worry about it this point :D — fila90, Jan 22 '19 at 08:45

brk · Accepted Answer · 2019-01-22T08:54:26.610

1

The problem seems to be here

<form id="add-listing"> <div class="col-lg-12"> <div id="add-listing">

You have two dom elements with same id, which always need to be unique. Change the id of the form or divand then insidethencall thereset` function

Also you need to pass a string to selectedIndex

document.getElementById('category').selectedIndex = "0"

edited Jan 22 '19 at 08:54

answered Jan 22 '19 at 08:37

brk

48,835
10
56
78

Well spotted. I changed it but the select menu doesn't reset without adding that code from the plugin that 2 others mentioned ie: `$("#category").trigger("chosen:updated");` I don't like mixing jQuery with my vanilla javascript like this though... – user8463989 Jan 22 '19 at 08:43
I did what you said but still doesn't reset it. Just to confirm, my select menu in code editor: ``, code in my .then() block: `.then(response => { const catDrop = document.getElementById('category'); catDrop.selectedIndex = "0";` Am I missing something? – user8463989 Jan 22 '19 at 08:50
@user8463989 also why you need the `const` there ? – brk Jan 22 '19 at 08:55
No particular reason I guess. I have removed it and used what you have now: `document.getElementById('category').selectedIndex = "0"` but still does not reset it. Seems like the only thing that works is using the plugin jQuery code, sadly. Nobody else has added an answer regarding that, only mentioned it in comments. If you add it to your answer I can mark as accepted answer? – user8463989 Jan 22 '19 at 08:57

Reset select menu that is styled as

1 Answers1