jQuery根据下拉列表选项更改文本

Question

Hi I am looking for guidance on how I can change the interest rate value based on what type of account a customer chooses from the drop down.

Form:

<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/ Can I have some explanation of why this does not work?

Answer 1

It does not work since that is not valid JavaScript. Use a tool like JSLInt to check your code to see the errors.

You are missing many ( and ) in that code.

Look at the if statements on MDN

if (cipher_char == from_char) {
   result = result + to_char;
   x++;
} else {
   result = result + clear_char;
}

Do you see what you are missing? The ( and ) around the check.

Now jQuery val is a method, you are not calling a method. You need (). You can not set .val either.

The docs for jQuery val()

Your selector is also wrong, you are missing quotes.

Learn to use your console! It will show you the errors.

Answer 2

You have a lot of syntax errors and improper way of using jQuery functions and selectors

$("#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);
});  

You need to read more about JS syntax and jQuery selectors and functions use

Check the fiddle update http://jsfiddle.net/sedz/rmjKV/2/

Answer 3

JSHint doesn't validate your code. Aside that, it looks like you are binding to the form change not the acc_type change.

$("#acc_type").change(function() {

}

Valid JS Code:

$("#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/

Answer 4

Stuff like this

$(#acc_type)

should be

$('#acc_type')

Answer 5

You've got numerous errors in your code. I think I've fixed most of them below.

I've also wrapped you code in jquery's ready function, so the the script doesn't try and add the event before the page is fully loaded etc.

$(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);
    })
})

Answer 6

$("#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);
});

Find here http://jsfiddle.net/rmjKV/8/ your jsFiddle working, your old code was full of typos