title: getting an onClick event to select and show the select change on an html select form
body: <p><strong>Goal:</strong> Using an <code>onClick</code> event to run a function.  The function is designed to change the value and display the selected value in a <code>&lt;select&gt;</code> element in the HTML form.  I realize that <code>.val</code> only applies the value. 
  <br>It actually is changing the select text to empty.  </p>
  
  <p>I've tried using <code>.attr</code> and applying a selected attribute but that isn't appearing to work either.</p>
  
  <p><strong><code>onClick</code>, I want the value to change to the color, and also the color to display in the select box.  If the select box dropdown is triggered, I still want the other color options to be able to be chosen as well.</strong></p>
  
  <p>Any way to do this?</p>
  
  <pre><code>&lt;script&gt;
  function changeColor(color) {
    $(".select-color").val("'" + color + "'");
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>SELECT BOX</p>
  
  <pre><code>&lt;select class="select-color"&gt;&lt;option value=""&gt;SELECT A COLOR&lt;/option&gt;&lt;option value="BLACK"&gt;BLACK&lt;/option&gt;&lt;option value="RED"&gt;RED&lt;/option&gt;&lt;/select&gt;
  </code></pre>
  
  <p>LINK</p>
  
  <pre><code>&lt;a href="javascript:void(0)" onClick="changeColor('RED')"&gt;CHANGE TO RED&lt;/a&gt;
  </code></pre>