document.querySelectorAll不检测多个select的数据

Question

我有这个索引：

<select id="lstIngredientes" name="lstIngredientes" class="form-control" multiple="multiple">
                    <option value="Gambas" data-precio="2" data-base="S" class="base">Gambas</option>
                    <option value="Cerdo" data-precio="1.75" data-base="S" class="base">Cerdo</option>
                    <option value="Pollo" data-precio="1.50" data-base="S" class="base">Pollo</option>
                    <option value="Ternera" data-precio="2" data-base="S" class="base">Ternera</option>
                    <option value="Almendras" data-precio="0.50" data-base="N">Almendras</option>
                    <option value="Nuez" data-precio="0.60" data-base="N">Nuez</option>
                    <option value="Pimiento" data-precio="0.40" data-base="N">Pimiento</option>
                    <option value="Bambu" data-precio="0.60" data-base="N">Bambú</option>

我想给它添加一个这样的限制：

if(!document.querySelectorAll('option[data-base="S"]') ==1)
    mensaje("You can only choose one base ingredient.");


if(!document.querySelectorAll("option[data-base='N']").value > 0)
    mensaje("At least 1 optional ingredient.");

但无论条件是否满足，我都会跳过这两条消息。你知道为什么它不起作用吗？谢谢。

Answer 1

querySelectorAll将返回一个长度，您可以使用它的HTMLCollection属性来计算数值。

伪类选择器:checked可用于仅选择您选择的选项。

例如：

​

document.querySelector('form').
  addEventListener('submit', (e) => {
     e.preventDefault();
     const baseCount =
       document.querySelectorAll('[data-base="S"]:checked').length;
     if (baseCount !== 1) {
       alert("You can only choose one base ingredient.");
       return;
     }
     const optCount = 
       document.querySelectorAll('[data-base="N"]:checked').length;
     if (optCount < 1) {
       alert("At least 1 optional ingredient.");
       return;
     }
     alert('Everything is good!!');
  });

select {
  height: 140px;
}

[data-base="S"] {
  background-color: #EEF;
}

<form>
<select id="lstIngredientes" name="lstIngredientes" class="form-control" multiple="multiple">
<option
  value="Gambas"
  data-precio="2"
  data-base="S"
  class="base">Gambas</option>
<option 
  value="Cerdo"
  data-precio="1.75"
  data-base="S"
  class="base">Cerdo</option>
<option 
  value="Pollo"
  data-precio="1.50"
  data-base="S"
  class="base">Pollo</option>
<option 
  value="Ternera"
  data-precio="2"
  data-base="S"
  class="base">Ternera</option>
<option 
  value="Almendras"
  data-precio="0.50"
  data-base="N">Almendras</option>
<option 
  value="Nuez"
  data-precio="0.60"
  data-base="N">Nuez</option>
<option 
  value="Pimiento" 
  data-precio="0.40" 
  data-base="N">Pimiento</option>
<option 
  value="Bambu" 
  data-precio="0.60" 
  data-base="N">Bambú</option>                  
</select>
<br/>
<button type="submit">Submit</button>
</form>

​

Answer 2

要获得选定的选项，您需要使用:checked来获得选定的选项。

var sSelected = document.querySelectorAll('option[data-base="S"]:checked');
console.log(sSelected.length);

要获取所有值，您需要循环，因为它是一个集合

var nSelected = document.querySelectorAll('option[data-base="N"]:checked');
console.log(nSelected.length);
nSelected.forEach(function (option) {
  console.log(option.value, option.dataset.precio);
});