jquery-traversing: select -> option -> text

Question

I want to compare a variable with a select -> option -> text selected in order to change the "selected" attrib, here is my code, it works but I think is not the best way to write it, excuse my English, I used google translate for help hehehehe :

var lista = 'example 1'; 
$("#id option").each(function(){
  if($(this).text() == lista){
    $(this).attr('selected','selected');
  }
});

here's the html:

<select id="id" >
  <option value="0" >example 1</option>
  <option value="1" >example 2</option>
</select>

here's a few attempts

$('#id option:eq("'+lista+'")').attr('selected','selected')

$("#id option[text='"+lista+"']").attr('selected','selected')

Victor · Accepted Answer · 2011-02-15T21:03:46.703

7

Instead of looping through each, you can try this:

var lista = 'example 1'; 
$('#id option:contains(' + lista + ')').attr('selected', true);

or

$('#id option:[text="' + lista + '"]').attr('selected', true);

Works just as well. It just depends if your variable lista will need to be an exact match or just a partial one.

edited Feb 15 '11 at 21:03

answered Feb 15 '11 at 20:37

Victor

4,721
1
26
31

Second option is perfect, i will need to be exactly match, i think that I was pretty close hehehee – kakomerengue Feb 15 '11 at 20:55
@Victor Are you sure? :) I don't know why, but the code works only if the colon is present ... See here: http://jsfiddle.net/YbfqZ/1/ – Šime Vidas Feb 15 '11 at 21:01
@Victor Are you saying that you accidentally placed the colon at that position, only to find out that it only works that way? That is hilarious `:)` – Šime Vidas Feb 15 '11 at 21:09
The reason for that behavior is that your colon breaks the selector for `querySelectorAll` because it isn't valid. As such, it defaults to Sizzle, which will tolerate the colon, even though it technically isn't supported (which means it could break in the future). I'm guessing Sizzle will check for both *attributes* and *properties*. As such, it won't find a `text` attribute, but it will find the `text` property (as the one used in my answer). – user113716 Feb 15 '11 at 21:12
...borrowing the fiddle from @Šime Vidas, [here's an example](http://jsfiddle.net/YbfqZ/3/) that demonstrates that Sizzle will match a property instead of just an attribute with its `attribute-equals` selector. – user113716 Feb 15 '11 at 21:16
@Andy Question is here: http://stackoverflow.com/questions/5009572/jquery-selector – Šime Vidas Feb 15 '11 at 21:28
This helped me as well. Why such complicated code for such a simple thing ('init) – Robert Johnstone Apr 19 '11 at 12:23
Can i get the option that begins with something? – Piyush Mattoo Mar 07 '12 at 01:05

score 2 · Answer 2 · answered Feb 15 '11 at 20:45

2

There's nothing wrong with what you have, jQuery will be doing more-or-less the same under the hood.

You could use filter() if you want to chain it all together:

var lista = 'example 1'; 
$('#id option').filter(function () { 
    return $(this).text() == lista; 
})[0].selected = true;

:contains might work for you but it works like a wildcard match, e.g. cat would match category:

var lista = 'example 1'; 
$('#id option:contains(' + lista + ')')[0].selected = true;

answered Feb 15 '11 at 20:45

Andy E

338,112
86
474
445

I need a case insensitive contains. Is this possible? – Kees C. Bakker May 04 '11 at 10:34
@Kees: you would have to go the `filter()` route and use a regular expression [`test()`](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/RegExp/test) with the `i` modifier. If you get stuck, ask a question; that sort of thing will get you an answer in a matter of minutes. – Andy E May 04 '11 at 11:19
Yeah, I used the filter. Thanks for the suggestion! – Kees C. Bakker May 04 '11 at 11:51

score 2 · Answer 3 · answered Feb 15 '11 at 20:45

Your way is pretty efficient, but could be made a little more so like this:

var lista = 'example 1'; 
$("#id option").each(function(){
    if( this.text == lista ){
      this.selected = true;
      return false;
    }
});

This uses native properties so it will be faster.

.text property gives the text content of the <option> element
.selected sets the selected property
return false; will break the loop once one is selected, so it doesn't needlessly continue

Šime Vidas · Answer 4 · 2011-02-15T20:44:18.193

1

This should work:

$("#id option").attr('selected', function() {
    return this.innerHTML === lista;
});

edited Feb 15 '11 at 20:44

answered Feb 15 '11 at 20:37

Šime Vidas

182,163
62
281
385

I believe the OP was just looking for an optimization to his own code. – Victor Feb 15 '11 at 20:39
@Victor Yes I didn't notice that – Šime Vidas Feb 15 '11 at 20:42

score 0 · Answer 5 · answered Feb 15 '11 at 21:12

0

I'm probably too late.

var lista = 'example 1';
$('#id option[text="' + lista + '"]').attr('selected', true);

This is about 97% faster then

var lista = 'example 1';
$('#id option:contains("' + lista + '")').attr('selected', true);

check performance log at http://jsperf.com/selector-performance-00000

answered Feb 15 '11 at 21:12

Hussein

42,480
25
113
143

While you're right that the first selector will generally perform better, part of the reason for the performance difference is likely that the `[text=...]` version isn't matching any elements if your browser supports `querySelectorAll`. This is because `querySelectorAll` will look for a `text` *attribute*, which the `option` elements don't have. – user113716 Feb 15 '11 at 21:50

jquery-traversing: select -> option -> text

5 Answers5

Linked