我有一个HTML文档,格式如下:
<form>
<input type="text" id="price">
<input type="text" id="converted">
</form>
我还有以下JQuery:
$('#price').bind('keypress keyup', function() {
amount = $(this).val() * 30;
$('#converted').val(amount);
});
这正是我想要的。如果我在"price"中键入一个金额,那么"converted"中的值就会用我键入的值乘以30来更新。
然而,我希望这能支持两种不同的汇率,所以我在表单中创建了以下选择:
<select id="choice">
<option value="1">Currency 1</option>
<option value="2">Currency 2</option>
</select>
我知道我可以将上面的值设置为实际汇率,然后这个问题就会很快得到解决。但是,我需要这些值作为提交表单时的货币ID。因此,我提供了以下JSON对象:
[{"Currency":{"id":"1","rate":"30"}},{"Currency":{"id":"2","rate":"25"}}]
我在DOM中有这个内联,因为我不想每次在输入字段中键入新的数字时都浪费ajax请求。转换不需要是最新的。上面的JSON对象是使用CakePHP的$javascript->object生成的,我可以让它在脚本标记中显示,也可以让JQuery轻松访问它。
我正在努力解决的部分(可能在谷歌上找不到,因为我不知道该用哪个术语(是在JQuery的第二行使用"30"或"25"作为乘数的一种方式,这取决于在选择中选择了选项值"1"还是"2"。
var json = [{"Currency":{"id":"1","rate":"30"}},{"Currency":{"id":"2","rate":"25"}}];
$('#price').bind('keypress keyup', function() {
var rate = $(json).filter(function() {
return this.Currency.id == $('#choice').val();
}).get(0).Currency.rate;
var amount = $(this).val() * rate;
$('#converted').val(amount);
});
这里有一个现场演示来看看这一点。
选择更好的数据格式。在HTML中使用有意义的货币ID:
<select id="choice">
<option value="GBP">Pounds</option>
<option value="EUR">Euros</option>
</select>
然后将它们用作json对象中的键。请注意,不应引用数字。
//Assume base rate is dollars
var json = {
"GBP": {
"rate": 0.633
},
"EUR": {
"rate": 0.725
}
};
var price = $('#price'),
currencyId = $('#choice'),
converted = $('#converted');
price.keydown(function() {
// Some browers call keydown before the character pressed has been added
// to `.val()`. This gives them time to update the value
setTimeout(function() {
var currency = json[currencyId.val()];
var amount = price.val() * currency.rate;
converted.val(amount);
}, 0);
});
演示