title: jQuery - Each loop to select all items by data attribute, but also dependent on select (option) values
body: <p>I am in the process of building an e-Commerce shop and have hit a small bump in the road for my actual product page. Based on any product options set that would add to the price if selected, I would like to be able to update the price on the page live when these options have been added. I have managed to iterate through every element with a "data-price-effect" attribute attached to them, HOWEVER, when it comes to a <strong>select</strong> element, I would need to check if the item is selected as an <strong>option</strong>, each option has their respective price change attribute of course, but the value would only update to the actual <strong>select</strong> element.</p>
  
  <p>Here is my code upto now:</p>
  
  <pre><code>function updatePrice(){
      $('[data-price-effect]').each(function( index ) {
          // do something
      });
  }
  </code></pre>
  
  <p>Basic HTML set-up to explain further:</p>
  
  <pre><code>&lt;form&gt;
      &lt;input type="text" name="foo" onchange="updatePrice();" data-price-effect="10.00" /&gt;
  
      &lt;select name="bar" onchange="updatePrice();"&gt;
          &lt;option selected value="Item1" data-price-effect="5.00"&gt;Item 1&lt;/option&gt;
          &lt;option selected value="Item2" data-price-effect="8.00"&gt;Item 2&lt;/option&gt;
          &lt;option selected value="Item3" data-price-effect="10.00"&gt;Item 3&lt;/option&gt;
      &lt;/select&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I have NO idea how to even logically do this, not even with some huge messy code. Any pointers here from someone more experienced with Javascript?</p>