如何在选择选项更改时更改值？

Question

以下是由PHP产生while循环我的html代码：

<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); 
    }); 
});