jQuery基于下拉列表选项更改文本
jQuery change text based on drop down list option
嗨,我正在寻求如何根据客户从下拉列表中选择的账户类型更改利率值的指导。
形式:
<form id="account" action="" method="post">
<select id = "acc_type">
<option value="current">Current</option>
<option value="savings">Savings</option>
</select>
<input type="text" id="interest" value="">
</form>
<script>
$("#account").change(function() {
var rate = "0.6%";
if $(#acc_type).val == ("current") {
rate = "0.6%");
} else if $(#acc_type).val == ("savings") {
rate = "0.8%");
}
$(#interest).val = rate;
</script>
http://jsfiddle.net/rmjKV/我能解释一下为什么不起作用吗?
它不起作用,因为这不是有效的JavaScript。使用像JSLInt这样的工具来检查代码以查看错误。
该代码中缺少许多(
和)
。
查看MDN 上的if语句
if (cipher_char == from_char) {
result = result + to_char;
x++;
} else {
result = result + clear_char;
}
你看到你缺少什么了吗?支票周围的(和)。
现在jQueryval是一个方法,您不是在调用一个方法。你需要()。您也不能设置.val。
jQuery val()的文档
您的选择器也错误,您缺少引号。
学会使用您的控制台!它将向您显示错误。
您有很多语法错误以及使用jQuery函数和选择器的不当方式
$("#account").change(function() {
var rate = "0.6%";
if($('#acc_type').val() == "current")
{
rate = "0.6%";
}
else if ($('#acc_type').val() == "savings")
{
rate = "0.8%";
}
$('#interest').val(rate);
});
您需要阅读更多关于JS语法和jQuery选择器和函数使用的信息
检查小提琴更新http://jsfiddle.net/sedz/rmjKV/2/
类似的东西
$(#acc_type)
应该是
$('#acc_type')
您的代码中有许多错误。我想我已经修复了下面的大部分。
我还将代码封装在jquery的ready函数中,这样脚本就不会在页面完全加载之前尝试添加事件。
$(document).ready(function() {
$('#account').change(function() {
var rate = "0.6%";
if ($('#acc_type').val() == "current") {
rate = "0.6%";
} else if ($('#acc_type').val() == "savings") {
rate = "0.8%";
}
$('#interest').val(rate);
})
})
JSHint不会验证您的代码。除此之外,看起来您绑定的是form
更改,而不是acc_type
更改。
$("#acc_type").change(function() {
}
有效JS代码:
$("#acc_type").change(function()
{
var rate = "0.6%";
if ($("#acc_type").val() == "current")
{
rate = "0.6%";
} else if ($("#acc_type").val() == "savings")
{
rate = "0.8%";
}
$("#interest").val(rate);
});
http://jsfiddle.net/rmjKV/5/
$("#acc_type").change(function() {
var rate = "0.6%";
if ($('#acc_type').val() == "current") {rate = "0.6%";}
else if ($('#acc_type').val() == "savings") {rate = "0.8%";}
$('#interest').val(rate);
});
在此处查找http://jsfiddle.net/rmjKV/8/你的jsFiddle正在工作,你的旧代码充满了打字错误
相关文章:
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- 根据选项卡内部的文本链接中的哈希ID动态选择jqueryUI选项卡
- 使用基于文本的 Jquery 选择选项
- 当选择值x时,Javascript需要在正确的位置显示文本区域,从而循环通过具有选择选项的表单
- 将输入文本与某个选项的值相匹配并自动选择
- 或者在表单上选择默认选项文本(选择1)
- 文本链接可更改引导程序选项卡
- 选择“选择选项”时显示文本.怎么做
- HTML-从mysql生成的选择框中的一个选项更改文本区域的颜色
- 禁用/启用基于单选/选择选项所选Javascript的文本框
- 单击select'时将数组行回显到文本区域中;s选项
- 在AngularJS Dropdownlost中设置默认文本选项
- 在ractive.js中获取所选选项文本
- 如何使用 jQuery 从 AJAX 生成的选择下拉列表中获取文本选项
- 发送所有文本选项在选择与请求
- 带有文本选项的单选按钮列表 蛋糕
- jquery设置php生成的文本选项列表
- jQuery警告文本选项从选择标签
- 向Ext.TabPanel添加不可选择的文本选项卡
- 如何添加其他(输入文本选项)在一个javascript测验页面