JQuery: How do I select a value from a dropdownlist case insensitive?

I think that the best way to do this is look at it from the before rather than the after. If you make them all lowercase, they are all standardized and easier to work with. Then all you have to do is make the user's input all lowercase, and it is really easy to match stuff.

Another option is to use a filter function, like the one found here:

$('something').filter(function() {
        return (new RegExp(value, "i")).test($(this).attr('attribute'));
    });

Value and attribute need to be replaced though.


On blur, iterate over your options and check if it matches. Then select the one that matches.

In code:

$("#button").blur(function(){
  var val = $(this).val();
  $("#list option").each(function(){
     if($(this).text().toLowerCase() == val) $(this).attr("selected","selected");
  });
});

I didn't test it yet, so be sure to check for syntax errors.


Here's another approach: find the matching value in its actual case, "StackOverflow," and call val() with that.

  var matchingValue = $('#select option').filter(function () { 
      return this.value.toLowerCase() === 'stackoverflow'; 
  } ).attr('value');    
  $('#select').val(matchingValue);

Of course, the literal 'stackoverflow' should be replaced with a variable.