title: how to reset values of select dropdown
body: <p>I have 3 different dropdowns which are all connected to each other. in the second drop-down options appear based on the selection in the first one...and so on</p>
  
  <p>let's say I select that I have books and movies in the first one.</p>
  
  <p>If I select books ---> the song of ice and fire and a clash of kings appear
  if I select movies ---> Django Unchained, pulp fiction appear... etc</p>
  
  <p>However, if a user makes "mistake" of choosing the wrong book (let's say the song of ice and fire) and goes back to books ---> the same book is still appearing in the select dropdown.</p>
  
  <p>What I want to do, is "reset" or the clear result of the previously chosen section.</p>
  
  <p>I've tried doing this:</p>
  
  <pre><code>document.getElementById('books').value = "";
  </code></pre>
  
  <p>but it completely deletes the placeholder of the second dropdown. I want the placeholder to be back to option 0 ---> choose a book</p>
  
  <p>Here is my <a href="https://jsfiddle.net/7qvshLcd/3/" rel="nofollow noreferrer">fiddle</a></p>
  
  <p>Please help me solve this problem</p>