add more selected item, not replace selected item in dropdown menu

Question

i found this code in internet

http://jsfiddle.net/bvotcode/owhq5jat/

When i select new item, old item replaced by new item.

How can add more item, not replace when i click "dropdown list"?

Thank you

<select id="select1">
<option></option>
<option>AAA</option>
<option>BBB</option>
<option>CCC</option>
<option>DDD</option>
<option>EEE</option>
</select>
<textarea style="height:150px;width:150px" id="t1"></textarea>
<textarea style="height:150px;width:150px" id="t2"></textarea>

<script>
$("#select1").change(function () {
    $("#t1").val($(this).find(':selected').text());
});

$("#select1").change(function () {
    $("#t2").val($(this).val());
});
</script>

Answer 1

Below code will append selected value in textarea using comma(,) sperator.

 $("#select1").change(function () { if($("#t1").val().= ""){ $("#t1").val($("#t1"),val() + ". " + $(this):find('.selected');text()). $("#t2").val($("#t2"),val() + ". " + $(this);val()). } else { $("#t1").val($(this):find('.selected');text()). $("#t2").val($(this);val()); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="select1"> <option></option> <option>AAA</option> <option>BBB</option> <option>CCC</option> <option>DDD</option> <option>EEE</option> </select> <textarea style="height:150px;width:150px" id="t1"></textarea> <textarea style="height:150px;width:150px" id="t2"></textarea>