title: How to dynamically append selected option to a div and update if selected option is changed?
body: <p>I have my HTML: a <code>&lt;select&gt;</code>, and a <code>&lt;div&gt;</code>:</p>
  
  <pre><code>  &lt;select&gt;
      &lt;option&gt;Please select one&lt;/option&gt;
      &lt;option&gt;Volvo&lt;/option&gt;
      &lt;option&gt;Saab&lt;/option&gt;
      &lt;option&gt;Mercedes&lt;/option&gt;
      &lt;option&gt;Audi&lt;/option&gt;
    &lt;/select&gt;
  
    &lt;div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>When I select an option, I want to append the being selected option value to the <code>&lt;div&gt;</code> element.
  This in my <code>js</code> code:</p>
  
  <pre><code>    $('select').on('change', function (e){
               $('div').append("//not sure how to write code here");
      });     
  </code></pre>
  
  <p>What should I add in the <code>append()</code>, so that when a user select an option, it will shows up on my <code>div</code>, if the user change to another option, it will update the content?</p>
  
  <p>For example, if I select Volvo, "Volvo" text will show in my <code>div</code>, if I change to <code>Saab</code>, "Saab" text will show up in my <code>div</code> to replace "Volvo"</p>