我正在尝试使用 jQuery 和一些基本的 javascript 函数来制作我的价格估算器。
我想要做的是更改我的 total
变量的值,具体取决于下拉菜单中所做的选择。我的价格不是根据单价制定的,因此我需要为一组选项设置价格。看我的JS代码你就会明白了(我尝试过但不起作用)
这是我的 fiddle .
这是我的 JS 代码:
var total=0;
$('#total span').text(total);
if (document.getElementById("paperSelect").value == "14 PT 1" && document.getElementById("printedSelect").value == "Front Only" && document.getElementById("quantitySelect").value == "500" && document.getElementById("turnaroundSelect").value == "4 days")
{
total=150;
}
这是我的 HTML 代码:
<form id="calculator">
<center>
<label class="titleLabels">Business cards</label></center>
<label class="formLabels">Dimensions :</label>
<select id="sizeSelect" class="formSelects">
<option value="3.5x2">3.5" x 2"</option>
<option value="3.5x1.25">3.5" x 1.25"</option>
</select>
<label class="formLabels">Paper :</label>
<select id="paperSelect" class="formSelects">
<option value="14 PT 1" selected="selected">14 PT Cardstock Gloss</option>
<option value="14 PT 2">14 PT Cardstock Matte</option>
</select>
<label class="formLabels">Printed :</label>
<select id="printedSelect" class="formSelects">
<option value="Front Only" selected="selected">Front Only</option>
<option value="Front and Back">Front and Back</option>
</select>
<label class="formLabels">Quantity :</label>
<select id="quantitySelect" class="formSelects">
<option value="250">250</option>
<option value="500" selected="selected">500</option>
</select>
<label class="formLabels">Production :</label>
<select id="turnaroundSelect" class="formSelects">
<option value="5 days" selected="selected">5 days</option>
<option value="4 days">4 days</option>
</select>
<div id="totalBox">
<label class="formLabels" id="total"> Total : $<span></span></label>
</div>
<!-- hidden values -->
<input type="hidden" id="sizeSelect_value" value="50" name="formValues" />
<input type="hidden" id="paperSelect_value" value="20" name="formValues" />
<input type="hidden" id="printedSelect_value" value="0" name="formValues" />
<input type="hidden" id="quantitySelect_value" value="25" name="formValues" />
<input type="hidden" id="turnaroundSelect_value" value="5" name="formValues" />
</form>
最佳答案
这是一个工作 fiddle :http://jsfiddle.net/manishie/72Jbe/3/
这是修改后的 Javascript:
var total=0;
$('#total span').text(total);
$('form').on('change', 'select', function() {
if (document.getElementById("paperSelect").value == "14 PT 1" && document.getElementById("printedSelect").value == "0" && document.getElementById("quantitySelect").value == "30" && document.getElementById("turnaroundSelect").value == "15")
{
total=150;
$('#total span').text(total);
}
});
第一个问题是您正在匹配文本描述,而不是与 if 语句的第二、第三和第四部分的值匹配。
第二个问题是您需要将其附加到选择标签的更改事件。
第三个问题是您在更改后没有保存新的总计。
运行 fiddle ,并将底部值更改为 4 天,它就会起作用。
关于javascript - 根据菜单中的选择更改值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13188721/