jQuery 检查有多少选择元素 selectedIndex !== 0

Question

我的页面中有多个选择元素，我需要找出有多少元素确实具有 selectedIndex !== 0

<select name="startMonth" class="selCalendar">
 <option value="">select</option>
 <option value="1" selected>Opt1</option>
 <option value="2">Opt2</option>
 <option value="4">Opt3</option>
</select>

<select name="startYear" class="selCalendar">
 <option value="">select</option>
 <option value="1">Opt1</option>
 <option value="2">Opt2</option>
 <option value="3">Opt3</option>
 </select>

<select name="endMonth" class="selCalendar">
 <option value="">select</option>
 <option value="1">Opt1</option>
 <option value="2">Opt2</option>
 <option value="3" selected>Opt3</option>
</select>

<select name="endYear" class="selCalendar">
 <option value="">select</option>
 <option value="1">Opt1</option>
 <option value="2">Opt2</option>
 <option value="3">Opt3</option>
</select>

我在更改时尝试了过滤器和 localStorage 对象，但没有成功.... 任何帮助，将不胜感激。谢谢！

Answer 1

你可以这样做：

var savedArray = new Array({ name: "startMonth", value: 1 }, { name: "startYear", value: 0 }, { name: "endMonth", value: 3 }, { name: "endYear", value: 0 });

$('#startMonth, #startYear, #endMonth, #endYear').change((ev) => {
    var index = savedArray.findIndex((elem) => { return elem.name == ev.target.id });
    savedArray[index].value = ev.target.val();
});

const countZero = () => {
  let count = 0;
  savedArray.forEach((elem) => {
      count += elem.value == 0 ? 1 : 0;
  });
  return count;
};

我没有尝试上面的代码。要使其工作，您只需将 ID 添加到您的选择中。

Answer 2

为什么要把事情复杂化，只需循环获取空值。

var $selects = $('select');
var nonEmptyValCount = 0;

$selects.each( function (index, el) {
    if (el.value !== '') nonEmptyValCount ++;
})

//output
console.log(nonEmptyValCount );

Answer 3

您可以直接在 jquery 选择器中执行此操作：

$(".selCalendar option[value!='']:selected")

例子：

$("#click").click(function() {

  var chosen = $(".selCalendar option[value!='']:selected");

  console.log(chosen.length)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="startMonth" class="selCalendar">
 <option value="">select</option>
 <option value="1" selected>Opt1</option>
 <option value="2">Opt2</option>
 <option value="4">Opt3</option>
</select>

<select name="startYear" class="selCalendar">
 <option value="">select</option>
 <option value="1">Opt1</option>
 <option value="2">Opt2</option>
 <option value="3">Opt3</option>
 </select>

<select name="endMonth" class="selCalendar">
 <option value="">select</option>
 <option value="1">Opt1</option>
 <option value="2">Opt2</option>
 <option value="3" selected>Opt3</option>
</select>

<select name="endYear" class="selCalendar">
 <option value="">select</option>
 <option value="1">Opt1</option>
 <option value="2">Opt2</option>
 <option value="3">Opt3</option>
</select>

<button type='button' id='click'>count</button>

---

或者您可以使用filter 对选择进行回调：

$(".selCalendar").filter(function(i, e) {
    return $(e).val() !== "";
});

$("#click").click(function() {
  var chosen = $(".selCalendar").filter(function(i, e) {
    return $(e).val() !== "";
  });

  console.log(chosen.length)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="startMonth" class="selCalendar">
 <option value="">select</option>
 <option value="1" selected>Opt1</option>
 <option value="2">Opt2</option>
 <option value="4">Opt3</option>
</select>

<select name="startYear" class="selCalendar">
 <option value="">select</option>
 <option value="1">Opt1</option>
 <option value="2">Opt2</option>
 <option value="3">Opt3</option>
 </select>

<select name="endMonth" class="selCalendar">
 <option value="">select</option>
 <option value="1">Opt1</option>
 <option value="2">Opt2</option>
 <option value="3" selected>Opt3</option>
</select>

<select name="endYear" class="selCalendar">
 <option value="">select</option>
 <option value="1">Opt1</option>
 <option value="2">Opt2</option>
 <option value="3">Opt3</option>
</select>

<button type='button' id='click'>count</button>