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个 select元素，也许以后会更多，因为我的公司需要使其动态化。
每个 select 都有 x个选项（现在有五个=Sélectionnez-Désignation-电子邮件-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

首先，这仅在select元素是页面上的第一个或唯一元素时才有效。最好尽可能地通过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>

注意：我将value =“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 2

尝试一下...

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

Answer 3

我正在使用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

最诚挚的问候

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

3 个答案: