jQuery estableciendo el atributo seleccionado en una lista de selección

Question

tengo el siguiente código HTML

<select id="dropdown"> 
    <option>A</option> 
    <option>B</option> 
    <option>C</option> 
</select> 

Tengo la cadena "B", así que quiero establecer el attrribute seleccionada en él por lo que será:

<select id="dropdown"> 
    <option>A</option> 
    <option selected="selected">B</option> 
    <option>C</option> 
</select> 

¿Cómo puedo hacer esto en JQuery?

Answer 1

Si no le importa modificar el código HTML un poco para incluir el atributo value de las opciones, se puede reducir significativamente el código necesario hacer esto:

<option>B</option> 

a

<option value="B">B</option> 

Esto será útil cuando se quiere hacer algo como:

<option value="IL">Illinois</option> 

Con eso, el jQuery sigue hará que el cambio:

$("select option[value='B']").attr("selected","selected"); 

Si decide no para incluir el uso de el atributo value, se le requerirá para pasar por cada opción, y comprobar manualmente su valor:

$("select option").each(function(){ 
    if ($(this).text() == "B") 
    $(this).attr("selected","selected"); 
}); 

Answer 2

Puede usar DOM puro. Ver http://www.w3schools.com/htmldom/prop_select_selectedindex.asp

document.getElementById('dropdown').selectedIndex = 1; 

pero jQuery puede ayudar:

$('#dropdown').selectedIndex = 1; 

Answer 3

Me iterar a través de las opciones, comparar el texto a lo que yo quiero ser seleccionado, a continuación, establezca el atributo seleccionado en esa opción. Una vez que encuentre el correcto, finalice la iteración (a menos que tenga un multiselección).

$('#dropdown').find('option').each(function() { 
     var $this = $(this); 
     if ($this.text() == 'B') { 
     $this.attr('selected','selected'); 
     return false; 
     } 
}); 

Answer 4

Algo a lo largo de las líneas de ...

$('select option:nth(1)').attr("selected","selected"); 

Answer 5

Código:

var select = function(dropdown, selectedValue) { 
    var options = $(dropdown).find("option"); 
    var matches = $.grep(options, 
     function(n) { return $(n).text() == selectedValue; }); 
    $(matches).attr("selected", "selected"); 
}; 

Ejemplo:

select("#dropdown", "B"); 

Answer 6

<select id="cars"> 
<option value='volvo'>volvo</option> 
<option value='bmw'>bmw</option> 
<option value='fiat'>fiat</option> 
</select> 

var make = "fiat"; 

$("#cars option[value='" + make + "']").attr("selected","selected"); 

Answer 7

Puede seguir la estrategia de .selectedIndex danielrmt, pero determinar el índice basado en el texto de las etiquetas de opción como esta:

$('#dropdown')[0].selectedIndex = $('#dropdown option').toArray().map(jQuery.text).indexOf('B'); 

Esto funciona en el HTML original sin usar atributos de valor.

Answer 8

$('#select_id option:eq(0)').prop('selected', 'selected'); 

su buena

Answer 9

Si está utilizando jQuery, ya que el 1.6 que tiene que utilizar el.prop método():

$('select option:nth(1)').prop("selected","selected"); 

Answer 10

Esto puede ser una solución

$(document).on('change', 'select', function() { 
      var value = $(this).val(); 
      $(this).find('option[value="' + value + '"]').attr("selected", "selected"); 
     })