Question

I have a textarea like so,

<textarea id="txtaFilter" cols="45" rows="5"></textarea>

and the following script,

$(document).ready(function () {
    $(".selector").bind('change', function () {
        var value = $(this).val();
        $("#txtaFilter").val($("#txtaFilter").val() + value);
        $(this).children('option:eq(0)').prop('selected', true);
    });
});

where “.selector” is a class applied to two dropdownlists.

When I chose a value on the dropdown, it appears to do nothing, but after looking at the debugger in chrome it is changing the value just not displaying it.

Does anyone know why this is? Is there something special I’m missing about the .val() property?

---

Problem/Solution:

I forgot that there are multiple “#txtaFilter”‘s on the page when I removed the $(this).siblings(“#txtaFilter”), So it was accessing the hidden one instead of the visible one. Sorry about that, guess I was wrong on the question too :/

Answer 1

You can use val method:

$("#txtaFilter").val(function(i, oldVal){
   return oldVal + value
});