Finding option within select options fails in Chrome and works in IE.. why?

Question

I have a select list with multiple items which I want to be able to filter by the text entered into some text field. This is pretty simple if you just do a js contains while iterating over each option. There are however in some cases a lot of options, so I employed jQuery:

var results = $("#myList options").find("option[text*=" + someVal.toUpperCase() + "]");

This works fine in IE, but not in Chrome and I simply cannot find out why (Firebug doesn't work at all on this page, but that's an aside.

Perhaps it's because "text" doesn't actually exist in the option html, but no searching by value fails too. Any ideas?

Answer 1

How many #myList elements are there in the page?

Answer 2

there are many errors here...

var results = $("#myList options").find("option[text*=" + someVal.toUpperCase() + "]");
 //                         ^              ^

the above code, will get all options' (option with an s). then look for children option containing a text attribute with someVal.toUpperCase() value.......

I guess you would want like this,

var results = $("#myList option").map(function(){
                  if ($(this).text().indexOf(someVal)!= -1 ) { return this; }
              }).get();

Answer 3

use jQuerys .filter() instead.

var results = $("#myList").children('option').filter(function(){ 
    return ( $(this).val().indexOf(someVal.toUpperCase()) > -1 );
});

Answer 4

I've just tried with the following on chrome: http://jsbin.com/olida3/edit

correctly alerts "1" for 'test'

$('#myList option[value*='+val+']');

Alternatively you could also write it like

$('option[value*='+val+']', '#myList');