Stop incrementation when selecting a new option in select element

Question

I m learning JavaScript and I spent all day on this, I hope you could help me ^^

I have X select elements like below :

<select class="custom-select select-group mb-3" id="name_typage_0">
 <option class="select-items" value="" selected>Sélectionnez..</option>
 <option class="select-items" value="designation">Désignation</option>
 <option class="select-items" value="email">Email</option>
 <option class="select-items" value="ville">Ville</option>
 <option class="select-items" value="activite">Secteur Activité</option>
</select>

When I choose one option in each X elements, I need to increment by one except for the first one 'Sélectionnez..'. When I choose this one, I need -1.

My problem is, when I choose 'Email' and then 'Ville' in the same select (let's say I changed my mind), it gives me +2 when I want +1.

I m using Vanilla JavaScript and hope you can help me without Jquery. I ll show you my last attempt at this massive and yet simple failure below lol

EDIT : Apparently my summary wasn't clear, I ll add some info ^^

• I have at least 4 select elements and maybe more later as my company needs to make it dynamic.
• Each select has x options (now five = Sélectionnez - Désignation - Email - Ville - Secteur Activité).
• If the user picks the option "Sélectionnez" in the select A, count = -1.
• If the user picks one option (whatever the option except "Sélectionnez") in the select A => count = +1

BUT (and here is my problem) if the user changes his mind and picks another option in the select A, I don't want count = 2. It must remains count = 1.

selects.forEach((item) => {
item.addEventListener('change', (event) => {
let comptTest = [];

  if(item.options[item.selectedIndex].text === 'Sélectionnez..'){
     count = -1;
  }

  if(item.options[item.selectedIndex].text !== 'Sélectionnez..'){
     if(comptTest.includes('lundi')){
        count = 0;
     }else{ 
        count = +1; 
        comptTest.push('lundi');
     }
  }

  total += count;
  });
});

Answer 1

try this...

JS (with Jquery)

$('select').change(function() {
    var nbr = 0;

    $('select').each(function() {   
    if( $(this).val() !== '' ) nbr++;
  });

  $('#elementNbr').html(nbr);
});

HTML

<div>
  <span id="elementNbr">0</span> / 3 element(s) select !
</div>

<select class="custom-select select-group mb-3" id="name_typage_0">
  <option class="select-items" value="" selected>Sélectionnez..</option>
  <option class="select-items" value="designation">Désignation</option>
  <option class="select-items" value="email">Email</option>
  <option class="select-items" value="ville">Ville</option>
  <option class="select-items" value="activite">Secteur Activité</option>
</select>

<select class="custom-select select-group mb-3" id="name_typage_0">
  <option class="select-items" value="" selected>Sélectionnez..</option>
  <option class="select-items" value="designation">Désignation</option>
  <option class="select-items" value="email">Email</option>
  <option class="select-items" value="ville">Ville</option>
  <option class="select-items" value="activite">Secteur Activité</option>
</select>

<select class="custom-select select-group mb-3" id="name_typage_0">
  <option class="select-items" value="" selected>Sélectionnez..</option>
  <option class="select-items" value="designation">Désignation</option>
  <option class="select-items" value="email">Email</option>
  <option class="select-items" value="ville">Ville</option>
  <option class="select-items" value="activite">Secteur Activité</option>
</select>

jsfiddle

Answer 2

First, this only works if the select element is the first or only one on the page. It's better to track by ID when possible since ID's are supposed to be unique... or you can use querySelectorAll and iterate through the resulting array. I like to keep things as simple as possible, so assuming there's one select element on the page, I'd use the select selector like this:

var count = 0;
var select = document.querySelector('select');

select.addEventListener('change', function(e) {
    if (e.target.value === "Sélectionnez") {
      count += 1;
      console.log(count);
    }
  });

<select>
  <option class="select-items" value="Other">Other</option>
  <option class="select-items" value="Sélectionnez">Sélectionnez..</option>  
</select>

note: I added the value="Sélectionnez" to the option in order to track what option is being selected. It's best practice to do this for each option. The value doesn't have to match the text node.

Iterating through multiple select elements:

var count = 0;
var select = document.querySelectorAll('select');

select.forEach(elem => {
  elem.addEventListener('change', function(e) {
    if (e.target.value === "Sélectionnez") {
      count += 1;
      console.log(count);
    }
  });
});

<select>
  <option value="Other">me</option>
  <option value="Sélectionnez">Sélectionnez</option>
</select>

<select>
  <option value="Other">me</option>
  <option value="Sélectionnez">Sélectionnez</option>
</select>