TextArea text append

how to append text from a dropdown option to a textarea

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div class="container">
  <form>
    <textarea class='form-control' placeholder="Write something..." id="message" name="message" size='10'></textarea>
    <fieldset class="form-group">
      <div class="checkbox">
        <label for="deptList">
          <label for="departments" id="deptList">Select a department
            <small>use this in case you've set up your account to <a
                                                    href="#"> include a department</a> at the end
                                                of the text
                                            </small>
          </label>
          <input type="checkbox" value="" class="checkbox-inline" id="deptCheck">
          <select class="form-control" id="departments">
            <option>Dept. 1</option>
            <option>Dept. 2</option>
            <option>Dept. 3</option>
            <option>Dept. 4</option>
            <option>Dept. 5</option>
            <option>Dept. 6</option>
            <option>Dept. 7</option>
          </select>
        </label>
      </div>

    </fieldset>
  </form>
</div>

JavaScript

$('#deptCheck').click(function() {

  var theMessage = $("#message").val();
  var theDepartment = $("#departments").find(":selected").text();

  if ($(this).is(":checked")) {

    console.log(theMessage + theDepartment);
    $("#message").val(theMessage + theDepartment);
  } else {
    alert('you have included department in your text, please remove it to avoid extra charges') //disable input
  }
});