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

i found this code in internet

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>

CodePudding user response：

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>