get value from drop down list into textarea JS

Question

I have a drop down list that will get fields from a form-builder, and I have a textarea right underneath the dropdown. I want the value from the dropdown list into the textarea where the current cursor position is. Its something to do with detecting change in the dropdown.

Any help would be greatly appreciated as I have been struggling with this.

    define(["jquery", "underscore", "backbone", "text!templates/app/tab-nav-actions.html", "text!templates/app/textbox.html", "text!templates/app/textarea.html", "views/select", "helper/pubsub"],
function($, _, Backbone, _tabNavTemplate, _textboxTemplate, _textareaTemplate,Select, PubSub) {
    return Backbone.View.extend({
        tagName: "div",
        className: "tab-pane col-xs-12 col-sm-12 col-md-12 col-lg-12",
        initialize: function() {
            this.id = this.options.id.toLowerCase().replace(/\W/g, '');
            this.id = this.id;
            this.tabNavTemplate = _.template(_tabNavTemplate);
            this.textboxTemplate = _.template(_textboxTemplate);
            this.textareaTemplate = _.template(_textareaTemplate);
            this.select = new Select({
                id: this.id  + (new Date().getTime() - 2),
                collection: this.collection,
                className: "col-xs-6 col-sm-6 col-md-5 col-lg-4 col-md-offset-1 col-lg-offset-1"
            });
            this.drop = new Select({
                id: this.id  + (new Date().getTime() - 2),
                collection: this.collection,
                className: "col-xs-6 col-sm-6 col-md-5 col-lg-4 col-md-offset-1 col-lg-offset-1"
            });
            this.render();
        },
        render: function() {
            $("#actionstabs").append(this.tabNavTemplate({
                title: this.options.title,
                id: this.id
            }));
            this.$el.attr("id", this.id);
            this.$el.append("<div class='actionsheadingrow col-xs-12 col-sm-12 col-md-12 col-lg-12'><h2>To</h2></div>");
            this.$el.append(this.select.render().el);
            this.$el.append("<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'><h2>Subject</h2></div>");
            this.$el.append(this.textboxTemplate({
                subjectclasses: "col-xs-6 col-sm-6 col-md-5 col-lg-4 col-md-offset-1 col-lg-offset-1",
                id: this.id + "subject"
            }));
            this.$el.append("<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'><h3>Message</h3></div>");
            this.$el.append(this.textareaTemplate({
                bodyclasses: "col-xs-6 col-sm-6 col-md-8 col-lg-4 col-md-offset-1 col-lg-offset-1",
                id: this.id + "Message"
            }));
            this.$el.append(this.drop.render().el);
            this.$el.appendTo("#actionscontent");
            this.delegateEvents();
        }
    });
    drop.onchange = function(){
          textareaTemplate.value = textareaTemplate.value  + this.append; //to appened
         //mytextbox.innerHTML = this.value;
    }
});