2016-07-23 3 views
1

Mit JQuery 1.11 habe ich Probleme, eine Option zu erzwingen. Ich kenne den Text der Option, und so bin ich mitWie erzwinge ich die Auswahl einer Option aus meinem Auswahlmenü in JQuery?

.find('option[text="Canada"]') 

aber mein Ausdruck ist das Element nicht lokalisieren, trotz der Tatsache, dass in der Konsole (Ausgang unten aufgeführt), können Sie deutlich sehen können gibt es eine ist Option, die "Kanada" lautet.

> $('.countryField') 
[<select id=​"user[address]​_country" name=​"user[address]​[country]​" class=​"countryField select-hidden">​…​</select>​<option value=​"0">​-- Select --​</option>​<option value=​"38">​Canada​</option>​…​<option value=​"249">​Zimbabwe​</option>​</select>​] 
> $('.countryField').find('option[text="Canada"]') 
[] 

Was mache ich falsch? Letztendlich möchte ich das Attribut "selected" für die Option mit dem angegebenen Text aktiviert haben (und alle anderen Optionen haben kein Attribut "selected").

Antwort

0

Sie können eine der folgenden versuchen.

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


$(".countryField option[value='Canada']").attr("selected","selected"); 
+0

So wird dies die Möglichkeit, mit dem Text auswählen, aber wird es auch alle anderen Optionen abzuwählen? –

+0

Wenn Ihr Drop-Down Single ist, dann ist die Antwort ja –

+0

Es ist eine einzelne Auswahl, aber ich finde nicht, was Sie sagen, um wahr zu sein. Das heißt, das Attribut "selected =" selected "" bleibt auf der Option, die zuvor ausgewählt wurde. –

0

Sie können einfach jQuery val verwenden, um Ihr Element auszuwählen.

$(function() { 
 
    $("#speed").selectmenu(); 
 

 
    // select the Canada option 
 
    $("#speed").val('Canada'); 
 
    $("#speed").selectmenu('refresh'); 
 
    
 
    // instead if you need to get the option with Canada text 
 
    var selectedEle = $("#speed option").filter(function(i, e) {return $(e).text() == 'Canada';}); 
 
    console.log(selectedEle[0].outerHTML); 
 
});
#speed { 
 
    width: 200px; 
 
}
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<select name="speed" id="speed"> 
 
    <option>Slower</option> 
 
    <option>Slow</option> 
 
    <option selected="selected">Medium</option> 
 
    <option>Fast</option> 
 
    <option>Faster</option> 
 
    <option>Canada</option> 
 
</select>

Verwandte Themen