title: Change value of <p> based on two <select> choices
body: <p>I need to change a price by changing option in two <code>&lt;select&gt;</code> tags. </p>
  
  <p>For example:</p>
  
  <p>If somebody chooses <code>Silver 1</code> in the first <code>&lt;select&gt;</code> and <code>Silver 3</code> in the second <code>&lt;select&gt;</code> then <code>&lt;p&gt;value&lt;/p&gt;</code> must be <code>&lt;p&gt;21&lt;/p&gt;</code>. </p>
  
  <p>If the option in the second <code>&lt;select&gt;</code> is lower than the option in the first <code>&lt;select&gt;</code> it must be <code>&lt;p&gt;ERROR&lt;/p&gt;</code></p>
  
  <p>Here is my html: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select class="form-control input-sm" name="current_tier" id="current_rank"&gt;
     &lt;option selected="" value="silver_i"&gt;Silver I&lt;/option&gt;
     &lt;option value="silver_ii"&gt; Silver II&lt;/option&gt;
     &lt;option value="silver_iii"&gt;Silver III&lt;/option&gt;
     &lt;option value="silver_iv"&gt;Silver IV&lt;/option&gt;
     &lt;option value="silver_elite"&gt;Silver Elite&lt;/option&gt;
     &lt;option value="silver_elite_master"&gt;Silver Elite Master&lt;/option&gt;
     &lt;option value="gold_nova_i"&gt;Gold Nova I&lt;/option&gt;
     &lt;option value="gold_nova_ii"&gt;Gold Nova II&lt;/option&gt;
     &lt;option value="gold_nova_iii"&gt;Gold Nova III&lt;/option&gt;
     &lt;option value="gold_nova_master"&gt;Gold Nova Master&lt;/option&gt;
     &lt;option value="master_guardian_i"&gt;Master Guardian I&lt;/option&gt;
     &lt;option value="master_guardian_ii"&gt;Master Guardian II&lt;/option&gt;
     &lt;option value="master_guardian_elite"&gt;Master Guardian Elite&lt;/option&gt;
     &lt;option value="distinguished_master_guardian"&gt;Distinguished Master Guardian&lt;/option&gt;
     &lt;option value="legendary_eagle"&gt;Legendary Eagle&lt;/option&gt;
     &lt;option value="legendary_eagle_master"&gt;Legendary Eagle Master&lt;/option&gt;
     &lt;option value="supreme_master_first_class"&gt;Supreme Master First Class&lt;/option&gt;
     &lt;option value="global_elite"&gt;Global Elite&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select class="form-control input-sm" name="future_rank" id="order_rank"&gt;
     &lt;option selected="" value="silver_ii"&gt;Silver II&lt;/option&gt;
     &lt;option value="silver_iii"&gt;Silver III&lt;/option&gt;
     &lt;option value="silver_iv"&gt;Silver IV&lt;/option&gt;
     &lt;option value="silver_elite"&gt;Silver Elite&lt;/option&gt;
     &lt;option value="silver_elite_master"&gt;Silver Elite Master&lt;/option&gt;
     &lt;option value="gold_nova_i"&gt;Gold Nova I&lt;/option&gt;
     &lt;option value="gold_nova_ii"&gt;Gold Nova II&lt;/option&gt;
     &lt;option value="gold_nova_iii"&gt;Gold Nova III&lt;/option&gt;
     &lt;option value="gold_nova_master"&gt;Gold Nova Master&lt;/option&gt;
     &lt;option value="master_guardian_i"&gt;Master Guardian I&lt;/option&gt;
     &lt;option value="master_guardian_ii"&gt;Master Guardian II&lt;/option&gt;
     &lt;option value="master_guardian_elite"&gt;Master Guardian Elite&lt;/option&gt;
     &lt;option value="distinguished_master_guardian"&gt;Distinguished Master Guardian&lt;/option&gt;
     &lt;option value="legendary_eagle"&gt;Legendary Eagle&lt;/option&gt;
     &lt;option value="legendary_eagle_master"&gt;Legendary Eagle Master&lt;/option&gt;
     &lt;option value="supreme_master_first_class"&gt;Supreme Master First Class&lt;/option&gt;
     &lt;option value="global_elite"&gt;Global Elite&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;p id="finalvalue"&gt;Final Value&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>