Question

I have a little issue. I have a select with options. When one option is selected, then text changes in textarea, everything is working perfectly while user don’t try to write something in text area, when user types, then text doesn’t change anymore. Here is code:
select with option:

   <select class="es" id="es1">
    <option id="edu1">1</option>
    <option id="edu2">2</option>
</select>

here is jQuery code which I use(in this code I am taking selected option id and then by id number I am showing text, everything is working perfectly)

$('#es1').change(function() {
                    $('#sk1').html('');
                    var id = $(this).children(":selected").attr("id");
                    var idd = id.split('edu');
                    var num = idd[1];
                    $('#sk1').html(customTextByNumber[num]);
                });

and I have text area with id=”sk1″. The most interesting is that, when user types something extra into box, when I select other option, text doesn’t change in it, but when I look at inspect element (in google chrome) I can see that text is changing, but after tag. For example when user don’t type everything is showing in html like this:

<textarea id="sk1">text here</textarea>

After user types something extra:

<textarea id="sk1">ecustom text and user text</textarea> Another options text which is not shown to user</textarea>

Maybe you have some ideas how to solve such problem?

SOLVED If someone have such problem use this

$('#sk1').val(something);

instead of this one

$('#sk1').html('something'); (this is bad one)

Answer 1

You need to use the .val() method on textarea:

$('#es1').change(function () {
    $('#sk1').val(''); // This line is probably unnecessary...
    var id = $(this).children(":selected").attr("id");
    var idd = id.split('edu');
    var num = idd[1];
    $('#sk1').val(customTextByNumber[num]);
});​

I don’t know what customTextByNumber is, but it should work after editing the text in the textarea.