Код Javascript скрыть показать цену * количество, чтобы показать общее количество

Question

У меня есть эта проблема с моим кодом, я не могу доставить мне ответ, который я хочу. Я хочу выбрать один из вариантов для продукта, а затем один из вариантов цены, а затем ввести количество и предоставить Sub-Total, поставляемый кодом. Проблема в том, что, поскольку у меня разные продукты, и у каждого продукта есть 3 разных цены, мне нужен мой код для правильного ответа.

Код, который я имею прямо сейчас, принимает только значение первой цены первого продукта, и я не могу заставить его работать, я чувствую, что у меня почти есть код ..., пожалуйста, помогите мне:)

 <div>Product<br /> 
    <select id="producto1"> 
    <option >Selecciona</option> 
    <option value="00">---ALARMAS---</option> 
    <option value="01">EXTREME BLACK</option> 
    <option value="02">EXTREME COBRA</option> 
    <option value="03">EXTREME GALACTIC</option> 
    </select></div> 
    <table> 
     <tbody> 
      <tr class="e01"> 
       <td class="0"> </td> 


       <td class="01"><label>Price</label><br /> 
       <select id="elias"> 

       <option value="180">180</option> 
       <option value="200">200</option> 
       <option value="220">220</option> 
       </select></td> 
       <td class="02"><label>Price</label><br /> 
       <select id="elias1"> 

       <option value="50">50</option> 
       <option value="20">20</option> 
       <option value="22">22</option> 
       </select></td> 
       <td class="03"><label>Price</label><br /> 
       <select id="elias2"> 

       <option value="80">80</option> 
       <option value="100">100</option> 
       <option value="120">120</option> 
       </select></td> 
      </tr> 
     </tbody> 
    </table> 
    <div> 
    <label for="CAT_Custom_500436">Quantity</label><br /> 
    <input type="text" maxlength="255" name="CAT_Custom_500436" id="CAT_Custom_500436" /></div> 
    <div><label for="CAT_Custom_500440">Sub-Total</label><br /> 
    <input type="text" maxlength="255" name="CAT_Custom_500440" id="CAT_Custom_500440" /></div> 
    <br /> 

Java___

  (function($) { 
    $("document").ready(function() { 
    $("td").hide(); 
    $("#producto1").change(function() { 
    $(".e01 td").hide(); 
    $("td." + $(this).val()).show(); 
    }); 
    }); 
    })(jQuery); 

var e = document.getElementById("elias"); 
var strUser = e.options[e.selectedIndex].value; 

var e = document.getElementById("elias1"); 
var strUser1 = e.options[e.selectedIndex].value; 

var e = document.getElementById("elias2"); 
var strUser2 = e.options[e.selectedIndex].value; 

$(function() { 
$('input').keyup(function(){ 
var quantity1 = $("#CAT_Custom_500436").val(); 


var total1 = quantity1 * strUser; 
var total1 = quantity1 * strUser1; 
var total1 = quantity1 * strUser2; 


$("#CAT_Custom_500440").val(total1); 
}); 
}); 

Answer 1

Вы можете попробовать что-то в этих линиях

$(document).ready(function() { 
    // Cache the variables 
    var $elias = $('#elias'), 
     $elias1 = $('#elias1'), 
     $elias2 = $('#elias2'), 
     $product = $('#producto1'), 
     $error = $('.error'), 
     $container = $('.container'); 
    $("td").hide(); 
    var productValue; 
    $product.change(function() { 
     $(".e01 td").hide(); 
     $("td." + $(this).val()).show(); 
     // Only show the container when the selections are not first 2 
     if (this.value !== 'Selecciona' && this.value !== '00') { 
      $error.addClass('hide'); 
      $container.removeClass('hide'); 
     } else { 
      $error.removeClass('hide'); 
      $container.addClass('hide'); 
     } 
     productValue = this.value; 
    }).change(); 
    // Bind the change event for Dropdowns 
    var $quantity = $('#CAT_Custom_500436'), 
     $total = $("#CAT_Custom_500440"); 

    $elias.add($elias1).add($elias2).change(findTotal); 
    $quantity.keyup(findTotal); 

    function findTotal() { 
     // Get the value 
     var quan = $quantity.val(); 
     var pri = $('.'+ productValue).find('select').val(); 
     var tot = pri * quan; 
     $total.val(tot); 

    } 
}); 

Check Fiddle