CODEWITHSUNDEEP
jqueryselectgoogle-chrome
Mr AH
Mr AH

Reputation: 1120

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

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?

Upvotes: 1

Views: 750

Answers (3)

Ben Rowe
Ben Rowe

Reputation: 28711

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');

Upvotes: 1

jAndy
jAndy

Reputation: 236032

use jQuerys .filter() instead.

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

Upvotes: 2

Reigel Gallarde
Reigel Gallarde

Reputation: 65264

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();

Upvotes: 2

Related Questions