I have multiple select elements in my page and I need to find out how many of the elements do have a 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>
I tried filter and localStorage Objects on Change, but no succes.... Any help would be appreciated. Thanks!
You can do this within the jquery selector directly:
$(".selCalendar option[value!='']:selected")
Example:
$("#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>
Or you can use filter with a callback on the selects:
$(".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>