javascript - 我怎样才能使文本区域内容中的外观值取决于所选值

Question

在此表单中包含文本区域和下拉字段。当我从此下拉列表中选择多个选项时，值显示在此 textarea 内，当我从下拉列表中取消选择选项时，它们将从 textarea 中删除，除了最后一个值我如何也取消选择最后一个值，从字段中选择的值应该看起来如何装饰我可以成为可能。文本框中的值在附加的示例图像中看起来像这样

var options = [
            {
              "text"  : "Option 1",
              "value" : "Value 1"
            },
            {
              "text"  : "Option 2",
              "value" : "Value 2"
            },
            {
              "text"  : "Option 3",
              "value" : "Value 3"
            },
            {
              "text"  : "Option 4",
              "value" : "Value 4"
            },
            {
              "text"  : "Option 5",
              "value" : "Value 5"
            },
            {
              "text"     : "Option 6",
              "value"    : "Value 6",
              "selected" : true
            },
            {
              "text"  : "rrrr",
              "value" : "Value 7"
            }
];
var selectBox = document.getElementById('multichecks');

for(var i = 0, l = options.length; i < l; i++){
  var option = options[i];
  selectBox.options.add( new Option(option.text, option.value, option.selected) );
}
$(document).ready(function() {
  $('#multichecks').multiselect({
    enableFiltering: true,
    enableCaseInsensitiveFiltering: true,
    filterPlaceholder: 'Search for something...',
    onChange: function test(){
      document.getElementById('test').value =  $('#multichecks').val().join(',')
      //document.getElementById('textbox').value = $('#multichecks').val().join(',')
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">

<!-- <input type="button" id = "btnAdd" onclick = "AddDropDownList()" value = "Add DropDownList" /> -->

<hr />
<strong>Where Condition :</strong>
<div class = "newa" id = "newq">
  <select id = "multichecks" name = "UHG ID" multiple = "multiple" onclick = "test();" ></select>
</div>
<hr />
<div class = "news" id = "newd">
  <textarea id="test"></textarea>
</div>
<hr />

Answer 1

如下操作，当没有选择任何值时，将textarea值清空

 var options =
      [
        {
          "text"  : "Option 1",
          "value" : "Value 1"
        },
        {
          "text"  : "Option 2",
          "value" : "Value 2"
        },
        {
          "text"  : "Option 3",
          "value" : "Value 3"
        },
        {
          "text"  : "Option 4",
          "value" : "Value 4"
        },
        {
          "text"  : "Option 5",
          "value" : "Value 5"
        },
        {
          "text"     : "Option 6",
          "value"    : "Value 6",
          "selected" : true
        },
        {
          "text"  : "rrrr",
          "value" : "Value 7"
        }
      ];
      var selectBox = document.getElementById('multichecks');

      for(var i = 0, l = options.length; i < l; i++){
        var option = options[i];
        selectBox.options.add( new Option(option.text, option.value, option.selected) );
      }
      $(document).ready(function() {
          $('#multichecks').multiselect({
            enableFiltering: true,
            enableCaseInsensitiveFiltering: true,
            filterPlaceholder: 'Search for something...',
            onChange: function test(){
            if($('#multichecks').val()){
            document.getElementById('test').value =  $('#multichecks').val().join(',');
            }else {
            document.getElementById('test').value = '';
            }
            
              
            //document.getElementById('textbox').value = $('#multichecks').val().join(',')
            }
          });
      });

 <title>Jquery multiple select with checkboxes using bootstrap-multiselect.js</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
    </head>
    <body>
    <!-- <input type="button" id = "btnAdd" onclick = "AddDropDownList()" value = "Add DropDownList" /> -->

    <hr />
    <strong>Where Condition :</strong>
    <div class = "newa" id = "newq">
      <select id = "multichecks" name = "UHG ID" multiple = "multiple" onclick = "test();" ></select>
    </div>
    <hr />
    <div class = "news" id = "newd">
      <textarea id="test"></textarea>
    </div>
    <hr />
    
    
    </body>