How to insert drop-down value into textArea?

Question

Does anyone know how can I insert values from the drop-down list into textarea, when it is being selected? I went searching around the internet and I tried doing it, yet it does not appear at all.

Below is the code snippets of what I have done but I'm stuck where I selected the value from drop-down list, it doesn't appear in my textarea at all. I need help.

Thanks people.

Variable.php

<?php

$variable_arr = array("Mobile", "Name", "Amount", "Due", "Etc");
$variable_str = '<select name="Variable" id="drp_dwn">';            
$variable_str .= '<option selected>&ltSelect Data&gt</option>';

foreach($variable_arr as $variable)
{
    $variable_str .= '<option value="'. $variable .'">&lt'.$variable.'&gt</option>';
}

$variable_str .= '</select>';

?>

change.js

$(document).ready(function() {
    $("#drp_dwn").change(function () {
        var str = "";

        $("selected").each(function () {
            str += $(this).text() + " ";
            });
        $("textArea").text(str);
        }).change();
});

index.php

<textarea rows="4" cols="40" type="text" name="content" id="textArea"></textarea>
<label> <input type="submit" value="Send" name="submit" id="send_box"> </label>

Answer 1

use val() method instead of text()

$("#drp_dwn").change(function () {
        $("#textArea").val(this.value);
 }).change();

DEMO

Answer 2

Try this

$(document).ready(function(){
    //adding event listener
    $('#drp_dwn').on('change', function(){

        //assigning the selected option to a variable
        var str = $(this).val();

        //so sending value to textbox
        $('#textArea').text(str);
    });
});