jQuery - Festlegen des ausgewählten Werts eines ausgewählten Steuerelements über dessen Textbeschreibung

Ich habe ein Auswahlsteuerelement und in einer Javascript-Variablen habe ich eine Textzeichenfolge.

Mit jQuery möchte ich das ausgewählte Element des Auswahlsteuerelements als das Element mit der Textbeschreibung festlegen, die ich habe (im Gegensatz zu dem Wert, den ich nicht habe).

Ich weiß, dass es ziemlich trivial ist, es nach Wert zu setzen. z.B

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

Aber ich bin ein bisschen ratlos, wenn ich es über die Textbeschreibung mache. Ich denke, es muss eine Möglichkeit geben, den Wert aus der Textbeschreibung herauszuholen, aber mein Gehirn ist zu freitagnachmittags, um es herausfinden zu können.

Wählen Sie anhand der Beschreibung für jQuery v1.6 + aus

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-Versionen unter 1.6 und größer oder gleich 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>

Beachten Sie, dass dieser Ansatz zwar in Versionen funktioniert, die über 1.6, aber unter 1.9 liegen, jedoch seit 1.6 veraltet ist. Es wird nicht funktionieren , in jQuery 1.9+.

Vorherige Versionen

val() sollte beide Fälle behandeln.

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

Ich habe das nicht getestet, aber das könnte für Sie funktionieren.

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

Versuchen Sie dies ... um die Option mit dem Text myText auszuwählen

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

Ich mache es auf diese Weise (jQuery 1.9.1)

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

Hinweis: Vergessen Sie nicht die Änderung (), ich musste deswegen zu lange suchen :)

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

gibt den Wert der ersten Option zurück, die Ihre Textbeschreibung enthält. Getestet und funktioniert.

Um alle Komplikationen der jQuery-Version zu vermeiden, empfehle ich ehrlich, eine dieser wirklich einfachen Javascript-Funktionen zu verwenden ...

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

Ich weiß, dass dies ein alter Beitrag ist, aber ich konnte ihn mit jQuery 1.10.3 und den oben genannten Lösungen nicht per Text auswählen. Am Ende habe ich den folgenden Code verwendet (Variation der Spoulson-Lösung):

      var textToSelect = "Hello World";

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

Hoffe es hilft jemandem.

Diese Linie funktionierte:

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

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

Die if-Anweisung stimmt genau mit "zwei" und "zwei drei" überein

Der einfachste Weg mit 1.7+ ist:

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

1,9+

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

Getestet und funktioniert.

Hier ist ein sehr einfacher Weg. Bitte benutzen Sie es

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

Schauen Sie sich das Plugin jquery selectedbox an

selectOptions(value[, clear]): 

Wählen Sie Optionen nach Wert aus, indem Sie eine Zeichenfolge als Parameter $("#myselect2").selectOptions("Value 1");oder einen regulären Ausdruck verwenden$("#myselect2").selectOptions(/^val/i); .

Sie können auch bereits ausgewählte Optionen löschen: $("#myselect2").selectOptions("Value 2", true);

Nur eine Randnotiz. Mein ausgewählter Wert wurde nicht festgelegt. Und ich hatte überall im Netz gesucht. Eigentlich musste ich nach einem Rückruf von einem Webdienst einen Wert auswählen, weil ich Daten von ihm bekam.

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

Die Aktualisierung des Selektors war also das einzige, was mir fehlte.

Ich habe festgestellt, dass bei Verwendung attrmehrere Optionen ausgewählt werden, wenn Sie dies nicht möchten. Die Lösung besteht darin, Folgendes zu verwenden prop:

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

Ich hatte ein Problem mit den obigen Beispielen, und das Problem wurde durch die Tatsache verursacht, dass meine Auswahlfeldwerte mit Zeichenfolgen fester Länge von 6 Zeichen vorgefüllt sind, der übergebene Parameter jedoch keine feste Länge hatte.

Ich habe eine RPAD-Funktion, die einen String mit der angegebenen Länge und dem angegebenen Zeichen nach rechts auffüllt. Nach dem Auffüllen des Parameters funktioniert es also.

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

Diese akzeptierte Antwort scheint nicht korrekt zu sein, während .val ('newValue') für die Funktion korrekt ist. Der Versuch, eine Auswahl anhand ihres Namens abzurufen, funktioniert bei mir nicht. Ich musste die ID und den Klassennamen verwenden, um mein Element abzurufen

Hier ist eine einfache Option. Legen Sie einfach Ihre Listenoption fest und legen Sie den Text als ausgewählten Wert fest:

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

Holen Sie sich die Kinder des Auswahlfeldes; Schleife durch sie; Wenn Sie die gewünschte gefunden haben, legen Sie sie als ausgewählte Option fest. Geben Sie false zurück, um die Schleife zu beenden.