How to get drop-down list item by specific text(case insensitive)

Question

I worked with J-Query, I have a problem in getting options value. I want to get option which have a specific text(text is case insensitive). I used following code -

My Html Code is -

<select id="ddlStateList_CA">
            <option value="AB">Alberta</option>
            <option value="BC">British Columbia</option>
            <option value="MB">Manitoba</option>
            <option value="NB">New Brunswick</option>
            <option value="NL">Newfoundland and Labrador</option>
            <option value="NT">Northwest Territories</option>
            <option value="NS">Nova Scotia</option>
            <option value="NU">Nunavut</option>
            <option value="ON">Ontario</option>
            <option value="PE">Prince Edward Island</option>
            <option value="QC">Quebec</option>
            <option value="SK">Saskatchewan</option>
            <option value="YT">Yukon</option>
        </select>

Jquery code -

$('#ddlStateList_CA option:contains("Manitoba")').val();

When run this code, i get correct result. but when run following Jquery code i got undefined.

$('#ddlStateList_CA option:contains("manitoba")').val();

I known Manitoba and manitoba is not same, but if i want to do this work for both case How can i do this?

Example

Answer 1

Use filter

$('#button').click(function() {
    console.log($("select option").filter(function() {
        return $(this).text().toLowerCase() === 'manitoBa'.toLowerCase();
    }).text());
});

JSFiddle

Answer 2

Use a simple regex based filter

var regexp = new RegExp('manitoba', 'i');

var val = $('#ddlStateList_CA option').filter(function(){
    return regexp.test($(this).text())
}).val();

Demo: Fiddle

Answer 3

I have in my files a function that can do what you want. Add this after loading jQuery:

if(jQuery){
    (function($){
        //@Author Karl-André Gagnon
        if(!$.fn.filterText) $.fn.filterText = function(text, caseSensitive){
            var returnedObj = $(),
                caseSensitive = caseSensitive || false,
                $this = $(this);
            if(text instanceof Array){
                for(var i = 0; i < text.length; i++){
                    if(typeof text[i] == 'string'){
                        returnedObj = returnedObj.add($this.filter(function(){
                            var search = caseSensitive ? text[i] : new RegExp(text[i], 'i')
                            return $(this).text().search(search) != -1;
                        }))
                    }else if(text[i] instanceof RegExp){
                        returnedObj = returnedObj.add($this.filter(function(){
                            return $(this).text().search(text[i]) != -1;
                        }))
                    }
                }
            }else if(typeof text == 'string'){
                returnedObj = returnedObj.add($this.filter(function(){
                    var search = caseSensitive ? text : new RegExp(text, 'i')
                    return $(this).text().search(search) != -1;
                }))
            }else if(text instanceof RegExp){
                returnedObj = returnedObj.add($this.filter(function(){
                    return $(this).text().search(text) != -1;
                }))
            }
            return returnedObj;
        }
    })(jQuery)
}

Minified version : http://pastebin.com/hiJ4aw8x

Then, you have multiple choice. You can call it like that :

alert($('#ddlStateList_CA option').filterText('manitoba', false).val())

which false represent "caseSensitive" (the default value is false, so it is actually not needed).

Or call it with regexp :

alert($('#ddlStateList_CA option').filterText(/manitoba/i).val());

Fiddle : http://jsfiddle.net/Cv8uC/6/