jQuery基于下拉列表选项更改文本

jQuery change text based on drop down list option

本文关键字:文本 选项 下拉列表 jQuery      更新时间:2023-09-26

嗨,我正在寻求如何根据客户从下拉列表中选择的账户类型更改利率值的指导。

形式:

<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正在工作,你的旧代码充满了打字错误