jqueryhtml-selectselectedindex

jQuery check how many select elements have selectedIndex !== 0


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!


Solution

  • 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>