在选择元素中选择新选项时，请停止增量

Question

i m学习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。

i使用香草javaScript，希望您无需jQuery就能为我提供帮助。我将向您展示我的最后一次尝试，但下面是这个巨大而简单的失败

编辑：显然我的摘要尚不清楚，我会添加一些信息^^

• 我至少有4个选择元素，也许以后再更多，因为我的公司需要使其动态。
• 每个选择具有 x选项(现在五=sélectionNez -désignation -email -email -ville -ville -secteuractivité(。
• 如果用户在选择A中选择"SélectionNez"选项，则计数= -1。
• 如果用户在选择A => count = 1
中选择一个选项(无论是"sélectionnez"除外(

但(这是我的问题(如果用户更改主意并在选择A中选择其他选项，我不希望Count = 2。它必须保持count = 1。<</p>

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使用香草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

最好的问候

Answer 2

首先，仅当select元素是页面上的第一个或仅一个时，才能起作用。最好在可能的情况下按ID跟踪ID，因为ID应该是唯一的……或者您可以使用QuerySelectorAll并通过结果数组进行迭代。我喜欢使事情尽可能简单，因此，假设页面上有一个select元素，我会使用select选择器这样：

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>

注意：我将值="sélectionNez"添加到该选项中，以跟踪选择哪个选项。为每个option做到这一点是最好的做法。该值不必匹配文本节点。

通过多个选择元素迭代：

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>

Answer 3

尝试这个...

JS (带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