javascript - 设置值不粘

Question

您好，我遇到一个小问题。下面是我的网页上的故事的编辑路线的图片。 Groupwrites.com 。当用户编辑故事时，由于 value=“” 字段，输入字段都具有创建故事时已设置的信息。这很棒，因为他们现在可以进行任何编辑/更改。

问题是，对于类别下拉菜单。由于某种原因，当我去编辑故事时，该值不会保留。例如，当我创建一个故事时，假设它是一个博客，我从下拉列表中选择博客。如果我现在去编辑该故事，它会默认返回小说(第一个选项)，而不是保存值。问题是，大多数人去编辑内容，例如更改标题，并没有注意到类别被切换。

我确信这是我忽略的一些小事情，谢谢。

<div class="container">
  <div class="row">
    <h1 style="text-align: center">Edit
      <%= story.title %>
    </h1>
    <div style="width: 40%; margin: 40px auto;">
      <form action="/stories/<%= story._id %>?_method=PUT" method="POST">
        <div class="form-group">
          <label>Title</label>
          <input class="form-control" type="text" name="story[title]" value="<%= story.title %>">
        </div>
        <div class="form-group">
          <label>Image URL</label>
          <input class="form-control" type="text" name="story[image]" value="<%= story.image %>">
        </div>
        <div class="form-group">
          <label>Plot</label>
          <textarea name="story[description]" rows="15" cols="55" class="form-control"><%= story.description %></textarea>
        </div>
        <div class="form-group">
          <label>Category</label>
          <select name="story[category]" class="form-control" value="<%= story.category %>">
            <option value="Fiction">Fiction</option>
            <option value="Sci-Fi">Sci-Fi</option>
            <option value="Fantasy">Fantasy</option>
            <option value="Fan-fiction">Fan-fiction</option>
            <option value="Blog">Blog</option>
            <option value="Romance">Romance</option>
            <option value="Mystery">Mystery</option>
            <option value="Thriller">Thriller</option>
          </select>
        </div>
        <div class="form-group">
          <button class="btn btn-large btn-success btn-block"> Publish </button>
        </div>
      </form>
    </div>
  </div>
</div>

Answer 1

如果你可以使用脚本，那么只需添加

<script>
window.onload=function() { 
  document.querySelector("[name='story[category]']").value="<%‌​= story.category %>"
}
</script> 

选择之后的某个地方