JSFiddle - React, Tailwind, and code Playground

by skram

HTML

<div id="udtTags" style="border: 2px solid red; "></div>
<br />
<br />
<p>
    <b>Add / Remove Elements</b> - Use First drop down to Add and Second drop down to remove.
</p>

<select size="10" id="tagsDD" multiple="multiple" style="width: 155px;" >
    <option>Java</option>
    <option>jQuery</option>
    <option>CSS</option>
    <option>HTML</option>
    <option>Javascript</option>
    <option>JSON</option>
    <option>PHP</option>
    <option>C#</option>
    <option>C</option>
</select>

<select size="10" id="remTagsDD" style="width: 155px;" >
    <option>Java</option>
    <option>jQuery</option>
    <option>CSS</option>
    <option>HTML</option>
    <option>Javascript</option>
    <option>JSON</option>
    <option>PHP</option>
    <option>C#</option>
    <option>C</option>
</select>

JavaScript

var $stDiv = $('#udtTags');

$('#tagsDD').change (function () {
    var selectedTags = $(this).val();
    $stDiv.text(selectedTags.toString());
});

$('#remTagsDD').change (function () {
    var t = $(this).val();
    
    //below is what you need to look
    var curSelection = $stDiv.text().split(",");
    var elIndex = curSelection.indexOf(t);
    
    if (elIndex >= 0) {
        curSelection.splice(elIndex, 1);
        $stDiv.text(curSelection.join());
    }
});

//Below code is from http://stackoverflow.com/a/144172/297641
if (!Array.prototype.indexOf) {
  Array.prototype.indexOf = function (obj, fromIndex) {
    if (fromIndex == null) {
        fromIndex = 0;
    } else if (fromIndex < 0) {
        fromIndex = Math.max(0, this.length + fromIndex);
    }
    for (var i = fromIndex, j = this.length; i < j; i++) {
        if (this[i] === obj)
            return i;
    }
    return -1;
  };
}