Javascript 选择选项为“更改”时如何更改值？

以下是php while loop生成的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>

为了获得此输出，我使用了以下jQuery代码，但它不能完全满足我的要求：

jQuery代码：

---

您可以通过使用数据属性来实现这一点。检查这里

---

我纠正了错误的HTML，添加了数据属性，将每个选择链接到相应的价格

我还为total price添加了一个单元格，因为每次进行选择时，价格都会与单元格中的值相乘：因此它会继续增加，结果很糟糕

以下是一个可行的解决方案：

$document.readyfunction{ $.menu\u extra\u item.onchange，函数{ var priceid=$this.datapriceid； var qty=parseInt$this.val； var price=parseInt$+priceid.text.replace/[^0-9.]/g； var总价=价格*数量； $total+priceid.text$+总价； }; }; -Qnt- 1. 2. 3. -Qnt- 1. 2. 3. 单价 $32 全部的 $32 单价 $10 全部的 $10 那很容易

$.menu\u extra\u item.changefunction{ var乘数=+this.val | 1； $.menu\u额外\u项目\u更改td.textfunction{ var baseValue=+$this.databaseValue； 返回$+乘数*基值； }; }; Qnt 1. 2. $32 $10 您也可以尝试以下方法：

风险价值价格=[32,10]； $body.onchange、.menu\u extra\u项、函数{ var selInd=$this.index-1； var newVal=价格[selInd]*$this.val； $.menu\u extra\u item\u change.eqselInd.text$+newVal； }; -Qnt- 1. 2. 3. -Qnt- 1. 2. 3. $32 $10

---

这不是正确的方法，但是如果你想去你已经拥有的，那么遵循这个

JsFiddle：

---

这不是一个有效的html，你丢失的结束标记。这很简单。只需根据所选的选择索引更改tr值。当前，您正在更改select CHANGE上的所有tr值。首先，将值添加到选项中，以使用可能与您丢失的表标记重复的值。如果tr元素不在任何表中，jQuery将找不到它们。谢谢，让我试试看，太棒了！请接受工作答案，以便人们发现它有用。您不必将事件绑定到每个选择框。我知道它的操作代码，但我们不要传播坏习惯。你错了。他需要用第一个下拉菜单更新第一个价格，用第二个下拉菜单更新第二个价格。阅读他给出的例子。我说的是$menu\u extra\u item。每个部分都是多余的。了解如何简化它并以相同的方式工作：

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`

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

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

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

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