¿Cómo puedo seleccionar el siguiente elemento que contiene cierto texto?

I am trying to select the next <option> that contains certain text.

Aquí está mi escenario:

<select id="stock">
    <option>Blue</option>
    <option>-Small</option>
    <option>-Medium</option>
    <option>-Large</option>
    <option>Black</option>
    <option>-Small</option>
    <option>-Medium</option>
    <option>-Large</option>
    <option>Red</option>
    <option>-Small</option>
    <option>-Medium</option>
    <option>-Large</option>
</select>

I can easily find the color by using this:

$('#stock').find('option:contains('Black')').attr('selected','selected');

But then I would like to select the size that is directly after that color. I have tried using next() like this:

$('#stock').find('option:contains('Black')').next('option:contains('Medium')').attr('selected','selected');

But apparently, next() only select the element immediately after. So, I tried nextAll() but it selects both Mediums after Black. So, I then tried using first() after nextAll, but that didn't work either. Nothing selected.

$('#stock').find('option:contains('Black')').nextAll('option:contains('Medium')').first().attr('selected','selected');

Am I missing something obvious? Thanks for your help!

Actualizar: I have it working now adding the :first selector to nextAll(). Thanks for your comments.

$('#stock').find("option:contains('Black')").nextAll("option:contains('Medium'):first").attr('selected','selected');

preguntado el 08 de noviembre de 11 a las 15:11

3 Respuestas

Quieres usar grupos de opciones for your select, as they are made for this kind of selections and could possible help you with selecting the right element using Javascript as well.

You can then use the following jQuery

$('#stock').find('optgroup[label="Black"]').find('option:contains("Medium")').attr('selected', 'selected')

O mira esto http://jsfiddle.net/HYydJ/

respondido 08 nov., 11:20

+1 for recommendation of option groups. This will allow you to filter the sizes which are relevant to the current colour. - Rory McCrossan

That would be a nice solution, but the color has to be selectable as well. - benmmc

Actually, they might not need to be selectable. The list is generated by a CMS, so I'm going to see of there is any way to do this with optgroups. - benmmc

jQuery.fn.next() only selects the NEXT sibling. If you provide a selector, it only selects the next sibling if the selector is matched (not the first sibling that is a match). This makes more sense when you start thinking of sets containing more than one match (e.g. if you did $('p').next('a') -- all a tags following a p)

jQuery.fn.first() simply returns the first item in the existing set (it's not a filter).

A simple answer, if you didn't want to use opt groups as vindia suggested (probably best answer), would be to do the following:

function findNextSize($node, size) {
   var $next = $node.next();
   while( $next.length ) {
      if( $next.html().substr(1) === size ) {
          return $next;
      }
   }
   return null;
}

findNextSize( $('#stock').find('option:contains('Black')'), 'Medium' );

respondido 08 nov., 11:19

This is ugly, but it will select the black option and the medium option directly after it -

$('#stock').find("option:contains('Black')").attr('selected','selected').nextAll("option:contains('Medium')").first().attr('selected','selected');

Demo http://jsfiddle.net/NBhm7/

respondido 08 nov., 11:20

Thanks. That was actually my last attempt you see in my question, and I see it works in your demo, but it doesn't work in my script for some reason. I have just found the solution of adding :first to my selector. - benmmc

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.