jQuery: establece el valor seleccionado de un control de selección a través de su descripción de texto

Tengo un control de selección, y en una variable de JavaScript tengo una cadena de texto.

Usando jQuery, quiero establecer que el elemento seleccionado del control select sea el elemento con la descripción de texto que tengo (en oposición al valor, que no tengo).

Sé que establecerlo por valor es bastante trivial. p.ej

$("#my-select").val(myVal);

Pero estoy un poco perplejo al hacerlo a través de la descripción del texto. Supongo que debe haber una forma de obtener el valor de la descripción del texto, pero mi cerebro está demasiado ocupado el viernes por la tarde para poder resolverlo.

Seleccionar por descripción para jQuery v1.6 +

var text1 = 'Two';
$("select option").filter(function() {
  //may want to use $.trim in here
  return $(this).text() == text1;
}).prop('selected', true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select>
  <option value="0">One</option>
  <option value="1">Two</option>
</select>

jQuery versiones inferiores a 1.6 y mayores o iguales a 1.4

var text1 = 'Two';
$("select option").filter(function() {
  //may want to use $.trim in here
  return $(this).text() == text1;
}).attr('selected', true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<select>
  <option value="0">One</option>
  <option value="1">Two</option>
</select>

Tenga en cuenta que si bien este enfoque funcionará en versiones superiores a 1.6 pero inferiores a 1.9, ha quedado en desuso desde 1.6. No funcionará en jQuery 1.9+.

Versión anterior

val() debe manejar ambos casos.

$('select').val('1'); // selects "Two"
$('select').val('Two'); // also selects "Two"

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<select>
  <option value="0">One</option>
  <option value="1">Two</option>
</select>

No he probado esto, pero esto podría funcionar para ti.

$("select#my-select option")
   .each(function() { this.selected = (this.text == myVal); });

Pruebe esto ... para seleccionar la opción con texto myText

$("#my-Select option[text=" + myText +"]").prop("selected", true);

Lo hago de esta manera (jQuery 1.9.1)

$("#my-select").val("Dutch").change();

Nota: no olvide el cambio (), tuve que buscar mucho tiempo por eso :)

$("#myselect option:contains('YourTextHere')").val();

devolverá el valor de la primera opción que contiene su descripción de texto. Probado esto y funciona.

Para evitar todas las complicaciones de la versión jQuery, honestamente recomiendo usar una de estas funciones javascript realmente simples ...

function setSelectByValue(eID,val)
{ //Loop through sequentially//
  var ele=document.getElementById(eID);
  for(var ii=0; ii<ele.length; ii++)
    if(ele.options[ii].value==val) { //Found!
      ele.options[ii].selected=true;
      return true;
    }
  return false;
}

function setSelectByText(eID,text)
{ //Loop through sequentially//
  var ele=document.getElementById(eID);
  for(var ii=0; ii<ele.length; ii++)
    if(ele.options[ii].text==text) { //Found!
      ele.options[ii].selected=true;
      return true;
    }
  return false;
}

Sé que esta es una publicación antigua, pero no pude seleccionarla por texto usando jQuery 1.10.3 y las soluciones anteriores. Terminé usando el siguiente código (variación de la solución de spoulson):

      var textToSelect = "Hello World";

      $("#myDropDown option").each(function (a, b) {
            if ($(this).html() == textToSelect ) $(this).attr("selected", "selected");
        });

Espero que ayude a alguien.

Esta línea funcionó:

$("#myDropDown option:contains(myText)").attr('selected', true);

 $("#Test").find("option:contains('two')").each(function(){
     if( $(this).text() == 'two' ) {
        $(this).attr("selected","selected");
     }
 });

La declaración if no coincide exactamente con "dos" y "dos tres" no coincidirá

La forma más fácil con 1.7+ es:

$("#myDropDown option:text=" + myText +"").attr("selected", "selected"); 

1.9+

$("#myDropDown option:text=" + myText +"").prop("selected", "selected"); 

Probado y funciona.

Aquí es de manera muy simple. por favor úsalo

$("#free").val("y").change();

eche un vistazo al complemento jquery selectedbox

selectOptions(value[, clear]): 

Seleccione las opciones por valor, utilizando una cadena como parámetro $("#myselect2").selectOptions("Value 1");o una expresión regular $("#myselect2").selectOptions(/^val/i);.

También puede borrar las opciones ya seleccionadas: $("#myselect2").selectOptions("Value 2", true);

Solo en una nota al margen. Mi valor seleccionado no se estaba configurando. Y tuve que buscar por toda la red. En realidad, tuve que seleccionar un valor después de una llamada desde un servicio web, porque estaba obteniendo datos de él.

$("#SelectMonth option[value=" + DataFromWebService + "]").attr('selected', 'selected'); 
$("#SelectMonth").selectmenu('refresh', true);

Así que la actualización del selector fue lo único que me faltaba.

Descubrí que al usarlo attrterminaría con múltiples opciones seleccionadas cuando no quisiera: la solución es usar prop:

$("#myDropDown option:text=" + myText +"").prop("selected", "selected");

Tuve un problema con los ejemplos anteriores, y el problema fue causado por el hecho de que mis valores de cuadro de selección se rellenan previamente con cadenas de longitud fija de 6 caracteres, pero el parámetro que se pasó no tenía una longitud fija.

Tengo una función rpad que rellenará a la derecha una cadena, a la longitud especificada y con el carácter especificado. Entonces, después de rellenar el parámetro, funciona.

$('#wsWorkCenter').val(rpad(wsWorkCenter, 6, ' '));


function rpad(pStr, pLen, pPadStr) {
if (pPadStr == '') {pPadStr == ' '};
while (pStr.length < pLen)
    pStr = pStr + pPadStr;
return pStr; 
} 

 $('#theYear').on('change', function () {
 FY = $(this).find('option:selected').text();
 $('#theFolders').each(function () {
     $('option:not(:contains(' + FY + '))', this).hide();
 });
 $('#theFolders').val(0);
});

$('#theYear').on('mousedown', function () {
 $('#theFolders option').show().find('option:contains("Select")', this).attr('selected', 'selected');
});

Esta respuesta aceptada no parece correcta, mientras que .val ('newValue') es correcto para la función, intentar recuperar una selección por su nombre no funciona para mí, tuve que usar el id y el nombre de clase para obtener mi elemento

Heres una opción fácil. Simplemente configure su opción de lista y luego configure su texto como valor seleccionado:

$("#ddlScheduleFrequency option").selected(text("Select One..."));

Obtenga los hijos del cuadro de selección; bucle a través de ellos; cuando haya encontrado el que desea, configúrelo como la opción seleccionada; devuelve falso para detener el bucle.