jQuery HTML Singular / Plural Text based on select multiple

May 17, 2022

I’m trying to get the singular/plural for the text before the array, based on how many options are selected in the array.

For example, if only one selected option, it should be Result in Category 1
if two or more are selected: Results in Category 1, Category 2, and Category 3

Working demo: https://jsfiddle.net/baidoct/xnjf9b0t/12/

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

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


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

});

What’s the best and elegant way to approach this?

>Solution :

You can use Template literals (Template strings)

All I have changed is the following line from:

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

$('.asg-heading .dynamicKat').html(`Result${ausbildungKatList.length > 1 ? 's': ''} in ${humanLang(ausbildungKatList)}`);

If using template literals you can use variables like so ${variableName} or in this case a short if/else.

function humanLang(arr) {
  if (arr.length <= 0) return '';
  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${ausbildungKatList.length > 1 ? 's': ''} in ${humanLang(ausbildungKatList)}`);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Update: Replace entire word with variable names

function humanLang(arr) {
  if (arr.length <= 0) return '';
  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

const singularResult = 'Result';
const pluralResult = 'Results';

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

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

   $('.asg-heading .dynamicKat').html(`${ausbildungKatList.length > 1 ? pluralResult : singularResult} in ${humanLang(ausbildungKatList)}`);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>