JSFiddle - React, Tailwind, and code Playground

by Tudor Baidoc

HTML

<h1 class="asg-heading display-5">

  <span class="dynamicKat">Result in</span>
</h1>

<div class="form-floating">
  <label class="" for="selectKat">Ausbildungskategorie</label>
  <select class="form-select btn btn-neutral" multiple="multiple" id="selectKat">
    <option value="Category 1">Category 1</option>
    <option value="Category 2">Category 2</option>
    <option value="Category 3">Category 3</option>
    <option value="Category 4">Category 4</option>
  </select>
</div>

JavaScript

function humanLang(arr) {
  if (arr.length === 1) return arr[0];
  const firsts = arr.slice(0, arr.length - 1);
  const last = arr[arr.length - 1];
  return firsts.join(', ') + ' and ' + last;
}

// Update Title
$("#selectKat").change(function () {
  var ausbildungKatList = [];

  $.each($("#selectKat option:selected"), function () {
    ausbildungKatList.push($(this).val());
  });


   $('.asg-heading .dynamicKat').html("Result in " + humanLang(ausbildungKatList));

});