title: split value and append price when choosing an option
body: <p>I want to append var total to <code>&lt;p id="total"&gt;10&lt;/p&gt;</code> when someone choose option </p>
  
  <pre><code>&lt;select name="item-select"  id="item-select" onchange="price(this)"&gt;
  &lt;option  selected&gt;Choose an item&lt;/option&gt;
  &lt;option value="1|100|4.5" &gt;item 1&lt;/option&gt;
  &lt;option value="2|100|5.5" &gt;item 2&lt;/option&gt;
  &lt;option value="3|100|6.5" &gt;item 3&lt;/option&gt;
  &lt;/select&gt;
  &lt;select name="quantity"  id="quantity" onchange="price(this)"&gt;
  &lt;option  selected&gt;quantity&lt;/option&gt;
  &lt;option value="1" &gt;1&lt;/option&gt;
  &lt;option value="2" &gt;2&lt;/option&gt;
  &lt;option value="3" &gt;3&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div&gt;your price is &lt;p style="display:inline-block" id="total"&gt;10&lt;/p&gt; $&lt;/div&gt;
  </code></pre>
  
  <p>in value 1 is item_ID &amp; 100 is price and 4.5 is grams from the database</p>
  
  <p>i want when option clicked do this math ( Quantity * Gram + Price) then append it to the Int in <code>&lt;p&gt;&lt;/p&gt;</code></p>
  
  <p>my js</p>
  
  <pre class="lang-js prettyprint-override"><code>var q = $('#quantity').val();
  var e = $('#item-select').val();
  var splitted = e.split("|");
  var price = parseFloat(splitted[1]);
  var gram = parseFloat(splitted[2]);
  var total = q * gram + price;
  $("#item-select").change(function () {
      $("#total").html(+ total);
  });
  </code></pre>
  
  <p>js fiddle
  <a href="https://jsfiddle.net/su9wc2vp/" rel="nofollow noreferrer">https://jsfiddle.net/su9wc2vp/</a></p>