title: jQuery on click change selected option based on data attribute
body: <p>I'm trying to work on something where if you click on a specific element it will update the dropdown select to match the data attribute of the div.</p>
  
  <p>For the most part, this is what I have:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="selector"&gt;
    &lt;select class="js-example-basic-single"&gt;
      &lt;option value="#sedans-10" data-select="sedan" selected&gt;Sedans&lt;/option&gt; 
      &lt;option value="#suvs-10" data-select="suv"&gt;SUVs&lt;/option&gt; 
    &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;div class="list__vehicles"&gt;
  
    &lt;div class="item--vehicle active" data-vehicle="sedan"&gt;
      &lt;h2&gt;Sedan #1&lt;/h2&gt;
      &lt;a class="link--select" href="#"&gt;Select This&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="item--vehicle" data-vehicle="sedan"&gt;
      &lt;h2&gt;Sedan #2&lt;/h2&gt;
      &lt;a class="link--select" href="#"&gt;Select This&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="item--vehicle" data-vehicle="suv"&gt;
      &lt;h2&gt;SUV #1&lt;/h2&gt;
      &lt;a class="link--select" href="#"&gt;Select This&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="item--vehicle" data-vehicle="suv"&gt;
      &lt;h2&gt;SUV #2&lt;/h2&gt;
      &lt;a class="link--select" href="#"&gt;Select This&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>var link = $('.link--select');
  link.on('click', function(e){
    $(this).parent().addClass('active').siblings().removeClass('active');
    if ($('.active').data('vehicle') = $('.js-example-basic-single option').data('select')) {
      $('.js-example-basic-single option').val('selected');
    }
    e.preventDefault();
  });
  </code></pre>
  
  <p><strong>Link to Demo (CodePen):</strong>
  <a href="https://codepen.io/ultraloveninja/pen/JVWQeb" rel="nofollow noreferrer">https://codepen.io/ultraloveninja/pen/JVWQeb</a></p>
  
  <p>Overall, I'm trying to match the data attributes between the items and the selector if <code>item--vehicle</code> has the class <code>active</code>, and if there is a match then add <code>selected</code> to the option value with the match data attribute.</p>
  
  <p>I know what I have is incorrect, but I was trying to hash it out logically from what I was trying to get out of my head.</p>