title: Use javascript to simulate a click on HTML select option
body: <p>I am trying to use checkboxes to select an option in an HTML select element. I have it NEARLY working and a working demo can be seen here - <a href="https://ecommerce-ds-addons.webflow.io/product/bag-addons-as-variants" rel="nofollow noreferrer">https://ecommerce-ds-addons.webflow.io/product/bag-addons-as-variants</a> - if you tick the checkboxes marked "Cycling Clips" or "Red Safety Light" - you can see that the faded out select boxs above change. </p>
  
  <p>However, the price should change and when the item is added to cart, these "Add-ons" should be included - but they are not. If you select the dropdowns manually using your mouse, you will see how it should work.</p>
  
  <p>A simplified version of the javascript I am using is:</p>
  
  <pre><code>$("select :nth-child(2)").prop('selected', true).trigger('change');
  </code></pre>
  
  <p>Is there a way to simulate a click that will work in this instance?</p>
  
  <p>I found this piece of code on another thread and it worked when a jquery trigger or click would not work. However, I 've tried this and it didn't work either.</p>
  
  <pre><code>$(function() {
      $('a').click(function() {
          // 'this' is not a jQuery object, so it will use
          // the default click() function
          this.click();
      }).click();
  });
  </code></pre>
  
  <p>Any help is greatly appreciated!</p>