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

我纠正了错误的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 2

你也可以试试这个：

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 3

您可以使用数据属性来实现。点击这里

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 4

这很容易。

＆＃13;

$(".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);
  });
});

＆＃13;

<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>

＆＃13;

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

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

5 个答案: