我想为不同的选择显示不同的选项。
MenuNo1 (textinput)
等于1,2,3,4 or 5
- 则menuPrice1
的值应为R70.00
。MenuNo1(textinput)
等于8,9,12
- 则menuPrice1
的值应为R85.00
。MenuNo1 (textinput)
等于11
- 则menuPrice1
的值应为R105.00
。我尝试过这样做:但MenuPrice1
字段中没有显示任何内容?控制台中也没有错误。
function calcMenu(form) {
var MenuPrice1 = (+form.MenuPrice1.value);
var MenuNo1 = (+form.MenuNo1.value);
if ([1,2,3,4,5].indexOf(+form.MenuNo1.value) != -1) {
MenuPrice1.value = "70";
}
else if ([8,9,12].indexOf(+form.MenuNo1.value) != -1) {
MenuPrice1.value = "85";
}
else if (+form.MenuNo1.value == 11) {
MenuPrice1.value = "105";
}
}
HTML
<form id="quote" action="" method="get">
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function($) {
jQuery('#quote').change(function() {
doTotal(this)
});
});
// ]]>
</script>
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function($) {
jQuery('#quote').change(function() {
calcMenu(this)
});
});
// ]]>
</script>
<table width="532" border="1" cellspacing="1" cellpadding="0.5">
<tbody>
<tr>
<th scope="col" width="70">
<div align="center">
Date
</div></th>
<th scope="col" width="158">
<div align="center">
Amount of Delegates ½ Day Conference @ R 240 pp
</div></th>
<th width="112">
<div align="center">
Amount of Delegates Full Day Conference @ R 260 pp
</div></th>
<th width="112">
<div align="center">
Menu No
</div></th>
<th width="112">
<div align="center">
Price pp for Menu (1-7: R70, 8-10 R85, 11: R105, 12: R85)
</div></th>
<th width="134">
<div align="center">
Total for the day
</div></th>
</tr>
<tr>
<td>
<div align="center">
<input type="text" name="date1" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="halfday1" size="15" maxlength="10" />
</div></td>
<td>
<div align="center">
<input type="text" name="fullday1" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="MenuNo1" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="MenuPrice1" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="total1" size="15" />
</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="text" name="date2" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="halfday2" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="fullday2" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="MenuNo2" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="MenuPrice2" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="total2" size="15" />
</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="text" name="date3" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="halfday3" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="fullday3" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="MenuNo3" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="MenuPrice3" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="total3" size="15" />
</div></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</form>
答案 0 :(得分:3)
您已var MenuPrice1 = (+form.MenuPrice1.value);
,之后正在进行MenuPrice1.value =
。
此外,还有一种更简洁的方法可以使将来更容易维护。
小提琴: http://jsfiddle.net/8q7Fh/3
var prices = [
{
values: [1,2,3,4,5],
price: 'R70.00'
},
{
values: [8,9,12],
price: 'R85.00'
},
{
values: [11],
price: 'R105.00'
}
];
function calcMenu(form)
{
var i, searchValue = parseInt(form.MenuNo1.value);
form.MenuPrice1.value = '';
for (i in prices)
{
if ($.inArray(searchValue, prices[i].values) != -1)
{
form.MenuPrice1.value = prices[i].price;
}
}
}
注意:您目前缺少值为6,7和10时的价格。现在我已将其设置为如果无法找到它将清除MenuPrice中的值确定的价格。需要考虑的事情!