Как изменить значение при выборе опции?

Question

Ниже мой HTML-код, который генерируется PHP во время цикла:

<select class="menu_extra_item"> 
    <option>--Qnt--</option> 
    <option>1</option> 
    <option>2</option> 
    <option>2</option> 
</select> 
<select class="menu_extra_item"/> 
    <option>--Qnt--</option> 
    <option>1</option> 
    <option>2</option> 
    <option>2</option> 
</select> 

<tr class="menu_extra_item_change">  
    <td>$32</td>  
</tr> 
<tr class="menu_extra_item_change">  
    <td>$10</td>  
</tr> 

Я хочу, чтобы изменить значение (цена, как $ 32), если выбрать вариант изменения.

См., Например,

I select (first select) option `1`then it will be show `$32` 
I select (first select) option `2`then it will be show `$62` 

I select (second select) option `1`then it will be show `$10` 
I select (second select) option `2`then it will be show `$20` 

Чтобы получить этот вывод я использую следующий JQuery код, но он не работает именно то, что я хочу :(

JQuery код:

$(".menu_extra_item").each(function() { 
     $(this).change(function() { 
      var menu_extra_item =$(this).val(); 
      var menu_extra_item_change = parseInt($('.menu_extra_item_change').text().replace(/[^0-9.]/g, "")); 
      alert(menu_extra_item_change); 
      var total_ex_price = menu_extra_item * menu_extra_item_change; 
      $(".menu_extra_item_change").each(function() {     
       $(".menu_extra_item_change").text("$"+total_ex_price); 
      }); 
     }); 
    }); 

Answer 1

Вы можете сделать это с помощью данных Признаки здесь.

https://jsfiddle.net/v6qmhw77/

<select class="change-me" data-price="32" data-target=".element-1"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 
<select class="change-me" data-price="10" data-target=".element-2"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

<div class="element-1"></div> 
<div class="element-2"></div> 


jQuery(document).ready(function(){ 

    $('.change-me').change(function(){ 
     var target = $(this).data('target'); 
     var price = $(this).data('price'); 

     var cost = parseInt(price) * $(this).val(); 

     $(target).html("$"+cost); 
     }); 
    }); 

Answer 2

Я исправил неисправный HTML, добавленный атрибут данных, чтобы «связать» каждый выбор с соответствующей ценой.

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

Вот рабочий раствор:

$(document).ready(function(){ 
 
    $(".menu_extra_item").on("change", function() { 
 
    var priceid = $(this).data("priceid"); 
 
    var qty = parseInt($(this).val()); 
 
    var price = parseInt($("#" + priceid).text().replace(/[^0-9.]/g, "")); 
 
    var total_ex_price = price * qty;    
 
    $("#total" + priceid).text("$"+total_ex_price); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="menu_extra_item" data-priceid="price1"> 
 
    <option>--Qnt--</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
</select> 
 
<select class="menu_extra_item" data-priceid="price2"> 
 
    <option>--Qnt--</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
</select> 
 

 
<table> 
 
    <tr class="menu_extra_item_change"> 
 
    <td>Unit price</td> 
 
    <td id="price1">$32</td> 
 
    <td>Total</td> 
 
    <td id="totalprice1">$32</td> 
 
    </tr> 
 
    <tr class="menu_extra_item_change"> 
 
    <td>Unit price</td> 
 
    <td id="price2">$10</td> 
 
    <td>Total</td> 
 
    <td id="totalprice2">$10</td> 
 
    </tr> 
 
</table>

Answer 3

Это легко.

$(".menu_extra_item").change(function() { 
 
    var multiplier = +$(this).val() || 1; 
 
    
 
    $(".menu_extra_item_change td").text(function() { 
 
    var baseValue = +$(this).data("baseValue"); 
 
    return "$" + (multiplier * baseValue); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select class="menu_extra_item"> 
 
    <option>Qnt</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
</select> 
 

 
<table> 
 
<tr class="menu_extra_item_change"> 
 
    <td data-base-value="32">$32</td> 
 
</tr> 
 
<tr class="menu_extra_item_change"> 
 
    <td data-base-value="10">$10</td> 
 
</tr> 
 
</table>

Answer 4

Вы также можете попробовать это:

var prices = [32,10]; 
 

 
$("body").on("change",".menu_extra_item",function() { 
 
     var selInd = $(this).index() - 1; 
 
     var newVal = prices[selInd] * $(this).val(); 
 
     $(".menu_extra_item_change").eq(selInd).text("$" + newVal); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select class="menu_extra_item"> 
 
    <option>--Qnt--</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
</select> 
 
<select class="menu_extra_item"> 
 
    <option>--Qnt--</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
</select> 
 
<table> 
 
<tr class="menu_extra_item_change">  
 
    <td>$32</td>  
 
</tr> 
 
<tr class="menu_extra_item_change">  
 
    <td>$10</td>  
 
</tr> 
 
    </table>

Answer 5

Это не правильный путь, но если вы хотите идти, что вы уже затем следовать этому ,

JsFiddle: https://jsfiddle.net/syjuLyh8/1/

<select class="menu_extra_item"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 
<select class="menu_extra_item"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 
<table> 
    <tr class="menu_extra_item_change">  
     <td>$32</td>  
    </tr> 
    <tr class="menu_extra_item_change">  
     <td>$10</td>  
    </tr> 
</table> 

JS:

$(".menu_extra_item").each(function(index) { 
    var menu_extra_item_change = parseInt($('.menu_extra_item_change td').eq(index).text().replace(/[^0-9.]/g,"")); 
    $(this).change(function() { 
     var menu_extra_item = $(this).val(); 
     var total_ex_price = menu_extra_item * menu_extra_item_change; 
     $(".menu_extra_item_change").eq(index).text("$" + total_ex_price); 
    }); 
});