这里有三个选择框
来选择格式、金额和运输类型。选择后,会自动计算价格。
这里,这些选择框
的样子:
<p>Format: <select class="calculate" name="format">
<option value="0">Please Select</option>
<option value="0">Format 1</option>
<option value="0">Format 2</option>
</select></p>
<p>Amount: <select class="calculate" name="amount">
<option value="0">Select amount</option>
<option value="247">250pcs</option>
<option value="279">1,000pcs</option>
<option value="389">2,500pcs</option>
</select></p>
<p>Shipping type: <select id="surcharge" name="shipping">
<option value="0">Select Shipping</option>
<option value="10%">Standard</option>
<option value="15%">Express</option>
</select></p>
目前,两种格式(格式1/格式2)的金额相同。
我想做的是:对于格式1,当前金额将保持不变,但如果用户选择格式 2 那么金额将如下所示:
<option value="0">Select amount</option>
<option value="300">250pcs</option>
<option value="350">1,000pcs</option>
<option value="400">2,500pcs</option>
其中值
不同!我怎样才能实现这个目标?
这里是 JSfiddle
预先感谢您的帮助!
最佳答案
您应该首先在数组中设置新值。因此,您可以在更改第一个选择的同时循环遍历它们。
然后您可以轻松地从第二个选择中获取选项,并使用正确的新值更新它们:
$(".calculate, #surcharge").on("change", function(){
if($(this).val() == 1)
{
var amountValues = new Array(0,250,400,500);
$("#menge option").each(function(key,value)
{
$(this).val(amountValues[key]);
});
} else if($(this).val() == 2)
{
var amount Values = new Array();
// .....
}
});
关于javascript - 如何使选择框动态化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20218843/