jQuery - impostazione del valore selezionato di un controllo select tramite la sua descrizione testuale

Ho un controllo di selezione e in una variabile javascript ho una stringa di testo.

Usando jQuery voglio impostare l'elemento selezionato del controllo di selezione in modo che sia l'elemento con la descrizione del testo che ho (al contrario del valore, che non ho).

So che impostarlo in base al valore è piuttosto banale. per esempio

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

Ma sono un po 'sconcertato nel farlo tramite la descrizione del testo. Immagino che ci debba essere un modo per ottenere il valore dalla descrizione del testo, ma il mio cervello è troppo venerdì pomeriggio per essere in grado di risolverlo.

Selezionare per descrizione per 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>

versioni di jQuery inferiori a 1.6 e successive o uguali 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>

Si noti che sebbene questo approccio funzionerà con versioni precedenti alla 1.6 ma inferiori alla 1.9, è stato deprecato dalla 1.6. Non funzionerà in jQuery 1.9+.

Versione precedente

val() dovrebbe gestire entrambi i casi.

$('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>

Non l'ho provato, ma potrebbe funzionare per te.

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

Prova questo ... per selezionare l'opzione con il testo myText

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

Lo faccio in questo modo (jQuery 1.9.1)

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

Nota: non dimenticare la modifica (), ho dovuto cercare a lungo a causa di quello :)

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

restituirà il valore della prima opzione contenente la descrizione del testo. Testato questo e funziona.

Per evitare tutte le complicazioni della versione jQuery, raccomando sinceramente di utilizzare una di queste funzioni javascript davvero semplici ...

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;
}

So che questo è un vecchio post, ma non sono riuscito a selezionarlo tramite testo usando jQuery 1.10.3 e le soluzioni sopra. Ho finito per usare il seguente codice (variazione della soluzione di spoulson):

      var textToSelect = "Hello World";

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

Spero che aiuti qualcuno.

Questa linea ha funzionato:

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

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

L'istruzione if fa una corrispondenza esatta con "due" e "due tre" non saranno abbinati

Il modo più semplice con 1.7+ è:

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

1.9+

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

Testato e funziona.

Ecco un modo molto semplice. per favore usalo

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

dai un'occhiata al plugin jquery Selectedbox

selectOptions(value[, clear]): 

Seleziona le opzioni in base al valore, utilizzando una stringa come parametro $("#myselect2").selectOptions("Value 1");o un'espressione regolare $("#myselect2").selectOptions(/^val/i);.

Puoi anche cancellare le opzioni già selezionate: $("#myselect2").selectOptions("Value 2", true);

Solo una nota a margine. Il mio valore selezionato non veniva impostato. E ho cercato in tutta la rete. In realtà ho dovuto selezionare un valore dopo una richiamata da un servizio Web, perché stavo ottenendo dati da esso.

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

Quindi l'aggiornamento del selettore era l'unica cosa che mi mancava.

Ho scoperto che usando attrte finiresti con più opzioni selezionate quando non volevi - la soluzione è usare prop:

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

Ho avuto un problema con gli esempi precedenti e il problema è stato causato dal fatto che i valori della mia casella di selezione sono precompilati con stringhe di lunghezza fissa di 6 caratteri, ma il parametro che veniva passato non era di lunghezza fissa.

Ho una funzione rpad che correggerà a destra una stringa, alla lunghezza specificata e con il carattere specificato. Quindi, dopo il riempimento del parametro, funziona.

$('#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');
});

Questa risposta accettata non sembra corretta, mentre .val ('newValue') è corretto per la funzione, cercando di recuperare una selezione con il suo nome non funziona per me, ho dovuto usare l'id e il nome della classe per ottenere il mio elemento

Ecco un'opzione facile. Basta impostare l'opzione dell'elenco quindi impostarne il testo come valore selezionato:

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

Prendi i figli della casella di selezione; attraversali; quando hai trovato quello che desideri, impostalo come opzione selezionata; restituisce false per interrompere il looping.