CODEWITHSUNDEEP
javascriptjquery
shibbir ahmed
shibbir ahmed

Reputation: 1024

How to change value when select option is change?

Following is my html code which is generated by php while loop : 

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

I want to change the value (price like $32) when select option is change.

For e.g. 

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`

To get this output I am using following jQuery code but it's not working exactly what I want :(

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

Upvotes: 2

Views: 1723

Answers (5)

Susheel Singh
Susheel Singh

Reputation: 3854

This is not right way but If you want to go what you already have then follow this.

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

Upvotes: 0

ADreNaLiNe-DJ
ADreNaLiNe-DJ

Reputation: 4919

I corrected the faulty HTML, added data attribute to "link" each select to its corresponding price.

I also added a cell for total price, because each time the selection is made the price is multiplied from the value in the cell: so it continue to increase giving a bad result.

Here is a working solution:

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

Upvotes: 1

Roxoradev
Roxoradev

Reputation: 893

You can also try this:

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>

Upvotes: 1

Avseiytsev Dmitriy
Avseiytsev Dmitriy

Reputation: 1160

That's easy.

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

Upvotes: 0

Saravanan Sampathkumar
Saravanan Sampathkumar

Reputation: 3261

You can do that by using data attributes. Check here

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

Upvotes: 0

Related Questions