jQuery检查有多少select元素有selectedIndex！== 0
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery检查有多少select元素有selectedIndex！== 0相关的知识，希望对你有一定的参考价值。
我的页面中有多个选择元素，我需要找出有多少元素有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对象的变化，但没有成功....任何帮助将不胜感激。谢谢！
答案
您可以直接在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>另一答案
为什么复杂化的东西，只需循环为空值。
var $selects = $('select');
var nonEmptyValCount = 0;
$selects.each( function (index, el) {
if (el.value !== '') nonEmptyValCount ++;
})
//output
console.log(nonEmptyValCount );
另一答案
你可以这样做：
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。
以上是关于jQuery检查有多少select元素有selectedIndex！== 0的主要内容，如果未能解决你的问题，请参考以下文章