設定値はスティックなし

Question

こんにちは私は小さな問題を抱えています。以下は私のウェブページ上の物語の私の編集ルートの写真です。 Groupwrites.com。ユーザーがストーリーを編集する場合、value = ""フィールドのために、ストーリーの作成時に入力フィールドにすべての情報が設定されています。彼らは今、編集/変更を行うことができるので、これは素晴らしいことです。

問題は、カテゴリドロップダウンメニューです。何らかの理由で、私がストーリーを編集するときに値が保持されません。たとえば、私がストーリーを作成したときに、そのストーリーをブログにして、ドロップダウンからBlogを選択します。その物語を編集しようとすると、値を保存せずにフィクション（最初のオプション）に戻ります。問題は、ほとんどの人がコンテンツを編集してタイトルを変更し、カテゴリが切り替わることに気付かないということです。

私はそれが私が見落としているものと確信しています、ありがとうございます。

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

を追加し、どこかの選択

Answer 2

あなたはオプションで選択した属性を設定することができます。

<select> 
 
    <option selected>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
</select>

またはあなたの場合：そのような

<option value="Fiction" selected="<%= story.category === 'Fiction' ? true : '' %>"> 

か何かを（ありませんあまりにもsu ）そこEJSの構文の再