Wie wird der Wert geändert, wenn die Option geändert wird?

Question

Im Anschluss ist mein HTML-Code, der durch php while-Schleife erzeugt wird:

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

Ich möchte den Wert ändern (Preis wie $ 32), wenn wählen Sie die Option ändern ist.

Für z.B.

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` 

diese Ausgabe zu erhalten ich folgenden jQuery-Code verwenden, aber es funktioniert nicht genau, was ich will :(

jQuery-Code:

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

Sie können dies tun, indem Daten mit Überprüfen Sie hier

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

Ich korrigierte den fehlerhaften HTML, hinzugefügt Datenattribut zu "Link" jeweils auf den entsprechenden Preis auswählen.

Ich fügte auch eine Zelle für den Gesamtpreis hinzu, da jedes Mal, wenn die Auswahl getroffen wird, der Preis aus dem Wert in der Zelle multipliziert wird: so wird es weiter erhöht, was ein schlechtes Ergebnis ergibt.

Hier ist eine Arbeitslösung:

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

das einfach.

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

können Sie auch versuchen, diese:

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

Das ist nicht richtig, aber wenn Sie möchten, gehen Sie, was Sie bereits haben, dann ist dieser folgen .

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