Multiple Dropdown validation in jQuery is not working

Question

I need to check all the dropdown boxes have a selected value, but the below jQuery validates the only first dropdown. How I can solve it? Please help me.

MVC html

<% foreach (var item in Model.list)
   { %>
<select name="GroupSelect" style=" width : 100px;" class="GroupSelect">
        <option>--SELECT--</option>
        <option>Ball</option>
        <option>Bat</option>
    </select>
<% } %>
<input type="submit" id="details" />

My jQuery:

$('#details').click(function () {
            
    if ($('.GroupSelect').val() == "--SELECT--") {
        
        $('#error').attr('class', 'errorMessage');
        $('#error').text("Some Club Id Group Name is Missing Please Select the Group Name");
        return false;
    }
});

Answer 1

You need to check each() so do this:

Working Demo para usted :)

$('#details').click(function () {
    $('.GroupSelect').each(function() {
        if($(this).val() === "--SELECT--") {
            $('#error').attr('class', 'errorMessage');
            $('#error').text("Some Club Id Group Name is Missing Please Select the Group Name");
            return false;
        }
    });
});