CODEWITHSUNDEEP
jqueryfilter
Jeepstone
Jeepstone

Reputation: 2601

Jquery filter, if no match, return default

http://jsfiddle.net/jeepstone/kxuMC/

if($('#deliveryPostcodeEstimator').length > 0) {
    $('#deliveryPostcodeEstimator')
        .blur(function() {
            $('select[name=country] option').filter(function(index) { 
                if ($(this).text() == $('#deliveryPostcodeEstimator').val().toUpperCase()) {
                    var result = true;
                } else {
                    // return the last item in the dropdown list
                }
                console.log(result);
                return result;
            }).prop('selected', true);
            var thisForm = $(this).closest("form");
            //thisForm.submit();
        })
        .keyup(function() {
            $(this).val($(this).val().toUpperCase());
        })
}

In the code above, the user enters the outcode of a postcode. If there is a match (onblur) then the item is selected. I can't for the life of me work out how to set a default to the last item (Rest of the UK). I can set the default selected item, but I'd like it to default back to Rest of the UK if there is no match.

Thanks

Upvotes: 0

Views: 1001

Answers (2)

Kevin Bowersox
Kevin Bowersox

Reputation: 94469

Why not set the selected option to Rest of UK prior to conducting the filtering. Then let the filtering if appropriate overwrite the default selection.

if($('#deliveryPostcodeEstimator').length > 0) {
        $('#deliveryPostcodeEstimator')
            .blur(function() {
                //Set to default
                $('select[name=country] option:last').prop('selected', true);
                $('select[name=country] option').filter(function(index) { 
                    if ($(this).text() == $('#deliveryPostcodeEstimator').val().toUpperCase()) {
                        var result = true;
                    }
                    return result;
                }).prop('selected', true);
                var thisForm = $(this).closest("form");
                //thisForm.submit();
            })
            .keyup(function() {
                $(this).val($(this).val().toUpperCase());
            })
    }

Example: http://jsfiddle.net/kxuMC/1/

Upvotes: 2

Chowlett
Chowlett

Reputation: 46667

You need to check whether the filter matched anything. Something like this should do:

if($('#deliveryPostcodeEstimator').length > 0) {
        $('#deliveryPostcodeEstimator')
            .blur(function() {
                var sel = $('select[name=country] option').filter(function(index) { 
                    return ($(this).text() == $('#deliveryPostcodeEstimator').val().toUpperCase())                      
                });
                if (sel.length > 0)
                    sel.prop('selected', true);
                else
                    $('select[name=country] option').last().prop('selected', true);
                var thisForm = $(this).closest("form");
                //thisForm.submit();
            })
            .keyup(function() {
                $(this).val($(this).val().toUpperCase());
            })
    }

JSFiddle

Upvotes: 0

Related Questions