title: Add different result to one of the options of a select box
body: <p>I’ve got a simple calculator that takes data from two select boxes and calculate it. 
  But I need an extra feature for that calculator, so for example when I choose the the third option in the first select box, the calculator just gives me the particular text instead of calculation.</p>
  
  <p>Here is my code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;select&gt;
  &lt;option value=“"&gt;Days&lt;/option&gt;
  &lt;option data-price=“30” value=‘1'&gt;1&lt;/option&gt;
  &lt;option data-price=“40” value=‘2'&gt;2 &lt;/option&gt;
  &lt;option data-price=“50" value='3'&gt;**3**&lt;/option&gt;
  &lt;/select&gt;
  
  
  &lt;select&gt;
  &lt;option value=“"&gt;People&lt;/option&gt;
  &lt;option data-price=“10" value='1'&gt;1 &lt;/option&gt;
  &lt;option data-price="15" value='2'&gt;2 &lt;/option&gt;
  &lt;option data-price=“20" value='2'&gt;3 &lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><h2></h2> </p>
  
  <p>JS</p>
  
  <pre><code>var $selects = $("select").change(function () {
      var total = 0;
      $selects.each(function () {
          var price = parseFloat($(this).find("option:selected").data("price")) || 0;
          total += price;
      })
      $(".count h2").text('€ ' + total);
  })
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/64UU4.png" alt=""></p>