添加更多选定项目，而不是替换下拉菜单中的选定项目

Question

我在网上找到这段代码

当我 select 新项目时，旧项目被新项目取代。

单击“下拉列表”时如何添加更多项目而不是替换？

谢谢

<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

下面的代码将 使用逗号 (,) 分隔符在文本区域附加选定的值。

$("#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>

添加更多选定项目，而不是替换下拉菜单中的选定项目

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

html

javascript

css

drop-down-menu