如何在选择选项更改时更改值?
以下是由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);
});
});
});
你可以通过使用数据属性。在这里查看
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);
});
});
谢谢让我试试 –
我的解决方案是否有效? –
我正在实施 –
我纠正了错误的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>
您不必将事件绑定到每个选择框。我知道它的OP代码,但我们不要传播坏习惯。 –
你错了。他需要用第一个下拉菜单更新第一个价格,然后用第二个下拉菜单更新第二个价格。阅读他给出的例子。 –
我在说'$(“。menu_extra_item”)。each'部分 - 它是多余的。看看它如何可以简化,仍然以同样的方式工作:https://jsfiddle.net/h8zrgo38/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>
你也可以试试这个:
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>
这是不正确的方式,但如果你想要去的地方你已经然后按照这个。
的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);
});
});
这个心不是一个有效的HTML,你缺失的结束标记。 – Gintoki
更改了@John –
这很简单。只需根据所选的'select''索引()'更改'tr'值。目前你正在改变所有'tr'值在选择'change'上 –