javascript - 重置样式为 <li> 的选择菜单

Question

提交表单后我想重置它。除了选择菜单之外，一切都在重置。我已经尝试过:

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

在代码中，它看起来像是一个正常的选项:

          <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>

但它不会重置选择菜单。当在控制台中查看它的外观时，它的样式似乎是一个无序列表，其中包含如下列表项:

<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>

这是我想在表单提交后将其设置回的项目。

Answer 1

问题似乎出在这里

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

您有两个具有相同 id 的 dom 元素，它总是需要是唯一的。更改id form的或div and then inside然后call the重置`函数

您还需要将字符串传递给 selectedIndex

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