javascript - 在选择元素中选择新选项时停止递增

Question

我正在学习JavaScript，我花了一整天的时间，希望你能帮助我^^

我有 X 个选择元素，如下所示:

<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>

当我在每个 X 元素中选择一个选项时，除了第一个 'Sélectionnez..' 之外，我需要增加一个。当我选择这个时，我需要-1。

我的问题是，当我在同一个选择中选择“电子邮件”然后选择“Ville”时(假设我改变了主意)，当我想要 +1 时它会给我 +2。

我正在使用 Vanilla JavaScript，希望你能在没有 Jquery 的情况下帮助我。 我将在下面向您展示我在这个巨大而简单的失败中的最后一次尝试，哈哈

编辑:显然我的总结不清楚，我会添加一些信息^^

• 我至少有 4 个选择元素，以后可能会更多，因为我的公司需要使其充满活力。
• 每个选择都有x个选项(现在五个=Sélectionnez - Désignation - Email - Ville - Secteur Activité)。
• 如果用户在选项 A 中选择了选项“Sélectionnez”，计数 = -1。
• 如果用户在选择 A => count = +1 中选择了一个选项(除了“Sélectionnez”之外的任何选项)

但是(这是我的问题)如果用户改变主意并在选择 A 中选择另一个选项，我不希望计数 = 2。它必须保持计数 = 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

I m using Vanilla JavaScript

document.querySelectorAll('.custom-select').forEach((item) => {

    item.addEventListener('change', (event) => {

        let count = 0;

        document.querySelectorAll('.custom-select').forEach((SelectElem) => {

          if(SelectElem.value != '') count++;

        });

        document.querySelector('#elementNbr').textContent = count;

    });

});

jsfiddle

最好的问候