Javascript 根据菜单中的选择更改值
我试图使用jQuery和一些基本的javascript函数来实现我的价格估计器 我想做的是根据下拉菜单中的选择,更改我的Javascript 根据菜单中的选择更改值,javascript,jquery,html,Javascript,Jquery,Html,我试图使用jQuery和一些基本的javascript函数来实现我的价格估计器 我想做的是根据下拉菜单中的选择,更改我的total变量的值。我的价格不是由单价决定的,所以我需要为一组选项设定一个价格。通过查看我的JS代码(我尝试过但不起作用的代码),您会明白这一点 这是我的 下面是我的JS代码: var total=0; $('#total span').text(total); if (document.getElementById("paperSelect").value == "14
total
变量的值。我的价格不是由单价决定的,所以我需要为一组选项设定一个价格。通过查看我的JS代码(我尝试过但不起作用的代码),您会明白这一点
这是我的
下面是我的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>
名片
尺寸:
3.5英寸x2英寸
3.5英寸x1.25英寸
论文:
14磅纸板光泽
14磅硬纸板磨砂
印刷的:
仅正面
前后
数量:
250
500
制作:
5天
4天
总数:$
您必须实际更改行
<option value="14 PT 2">14 PT Cardstock Matte</option>
编辑:只是让事情变得更漂亮这里有一把小提琴:
以下是修订后的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语句第二、第三和第四部分的值
第二个问题是,您需要将其附加到select标记的更改事件
第三个问题是,新总数更改后,您没有保存它
运行小提琴,将底部值更改为4天,它将工作。 如果我可以这样解释的话,它们不是“逻辑”价格矩阵。我通过与竞争对手比较来决定价格。所以这是非常随机的。但是我创建价格的方式取决于下拉菜单中的选项。就像我在我的JS代码中尝试的那样,如果一切都是随机的,那就没用了。。。你必须要有某种矩阵,或者找出各种选择之间的关系谢谢你告诉我什么不起作用。现在我更了解问题所在。再次感谢!
$("#paperSelect option[selected=selected]").removeAttr("selected") ;
$("#paperSelect option[value=" + value + "]").attr("selected","selected") ;
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);
}
});