Który selektor muszę wybrać opcję według tekstu?

207

Muszę sprawdzić, czy <select>ma opcję, której tekst jest równy określonej wartości.

Na przykład, jeśli istnieje <option value="123">abc</option>, szukałbym „abc”.

Czy można to zrobić za pomocą selektora?

Szukam czegoś podobnego do $('#select option[value="123"]');tekstu.

Hailwood
źródło
Hmm ... odpowiedź hasw SLaks jest przydatna, ale punkt w odpowiedzi Floyds jest również dobry ... Nie wiem, co zaakceptować.
Hailwood
również czy w przypadku tych rozróżniana jest wielkość liter? (szukam nieuwzględniania wielkości liter i zawsze mogę po prostu zmienić na niższy
Hailwood,
1
Korzystam z podstawowej funkcji JavaScript .toLowerCase () i porównuję, jeśli wymagana jest rozróżnianie wielkości liter. Zaakceptuj również odpowiedź, która jest najbardziej użyteczna dla zadanego pytania. :)
Hari Pachuveetil,
to nie działa dla rozwijanego menu posiadającego API wielokrotnego wyboru? Próbowałem wszystkich możliwych rozwiązań, ale bez powodzenia. Korzystam z interfejsu API dropdowm multiselect Eric Hynd. Czy ktoś może rozwiązać ten problem?
Chaitanya Chandurkar

Odpowiedzi:

320

To może pomóc:

$('#test').find('option[text="B"]').val();

Demo skrzypce

Dałoby to opcję z tekstem, Ba nie te, które zawierają tekst, który zawiera B. Mam nadzieję że to pomoże

W przypadku najnowszych wersji jQuery powyższe nie działa. Jak skomentował Quandary poniżej, to działa dla jQuery 1.9.1:

$('#test option').filter(function () { return $(this).html() == "B"; }).val();

Zaktualizowano skrzypce

Hari Pachuveetil
źródło
1
nie działa to z najnowszymi wersjami jquery (jeśli usuniesz 'value =' z <option>)
KevinDeus
27
@KevinDeus: Dlaczego głos negatywny !? Odpowiedź była wtedy dla wersji jQuery!
Hari Pachuveetil
11
Zamiast tego użyj $ ('# opcja testu'). Filter (function () {return $ (this) .html () == "B";}). Val ();
Stefan Steiger,
84
@Quandary Nadal nie jest uzasadniony powód, aby głosować w dół, gdy wystarczy krótki komentarz. A może spodziewasz się, że ponownie przetestuje wszystkie odpowiedzi na każde nowe wydanie jQuery?
WynandB
2
Myślę, że głosowanie negatywne wynika z faktu, że powyższy przykład po prostu znajduje wybraną wartość i nie ustawia wybranej wartości.
nivs1978
133

Możesz użyć :contains()selektora, aby wybrać elementy zawierające określony tekst.
Na przykład:

$('#mySelect option:contains(abc)')

Aby sprawdzić, czy dany <select>element ma taką opcję, użyj .has()metody :

if (mySelect.has('option:contains(abc)').length)

Aby znaleźć wszystkie, <select>które zawierają taką opcję, użyj :has()selektora :

$('select:has(option:contains(abc))')
SLaks
źródło
3
:containsnie jest teraz ostateczny, prawda?
Hari Pachuveetil,
Na czym dokładnie polega problem z zawartością?
Ogier Schelvis
jak byś to zrobił tylko z wybranymi opcjami?
toddmo
Czy to też nie chwyta opcji 123abcdef?
Teepeemm,
@Teepeemm Tak, to różnica między dwiema najlepszymi odpowiedziami. Sprawdzanie tylko u góry zwraca opcję tylko z określonym tekstem, ta zwraca opcję zawierającą, ale nie tylko, ten konkretny tekst. Które przypadkowo jest w tej chwili tak naprawdę potrzebne, więc bardzo się cieszę, że to opublikowałem.
Lee A.
30

Żadna z poprzednich sugestii nie działała dla mnie w jQuery 1.7.2, ponieważ próbuję ustawić wybrany indeks listy na podstawie wartości z pola tekstowego, a niektóre wartości tekstowe są zawarte w wielu opcjach. Skończyło się na tym, że:

$('#mySelect option:contains(' + value + ')').each(function(){
    if ($(this).text() == value) {
        $(this).attr('selected', 'selected');
        return false;
    }
    return true;
});
Dr. C. Hilarius
źródło
1
Myślę, że to najlepsza odpowiedź, ponieważ faktycznie zwraca poprawne wyniki. Ale nie mogę przestać myśleć, że containscałkowite pominięcie może faktycznie przyspieszyć.
styfle
To działało dla mnie, ale w moim scenariuszu mogłem kliknąć edycję na siatce wiele razy, więc musiałem usunąć wybrany atrybut, gdy nie było dopasowania, w przeciwnym razie pierwsza wybrana opcja pozostanie dla kolejnych edycji. else {$ (this) .attr ('selected', ''); zwracać fałsz; }
esp
To rozwiązanie działało dla mnie, ale zamiast ustawiania atrybutu opcji, faktycznie zmieniłem menu wyboru, które musiałem zrobić: $(this).parent().val($(this).val()); Prawdopodobnie możesz zrobić oba, ale dla mnie ustawieniem był tylko rodzic val().
billynoah
20

Napotkałem ten sam problem poniżej to działający kod:

$("#test option").filter(function() {
    return $(this).text() =='Ford';
}).prop("selected", true);

Demo: http://jsfiddle.net/YRBrp/83/

Jaydeep Shil
źródło
15

To działało dla mnie: $("#test").find("option:contains('abc')");

Phillip Dennis
źródło
3
Powinieneś także wyjaśnić, dlaczego to działa.
Hannes Johansson
@HannesJohansson Albo powinien przynajmniej wyjaśnić, czym się różni lub dodać coś nowego do odpowiedzi SLaks, która jest prawie pięć lat starsza. ; ^)
ruffin
4
Upewnij się, że zdajesz sobie sprawę, że znajdzie to również tę opcję: <option> abcd </option>.
Charles,
Dzięki temu jest to zdecydowanie poprawne, a tym, czego wszyscy przeoczyli, jest dodanie .attr („wartość”); do końca. Jest to najłatwiejszy sposób na uzyskanie wartości do wykorzystania w sposób dynamiczny! Więc pełny kod powinien to polubić. $("#testselect").find("option:contains('option-text')").attr('value'); w ten sposób możesz użyć zdarzenia, takiego jak .click()zmiana ustawienia.
ChrisKsag,
12

To najlepsza metoda zaznaczania tekstu na liście rozwijanej.

$("#dropdownid option:contains(your selected text)").attr('selected', true);
sreejesh
źródło
3
Podobnie jak w przypadku podobnych odpowiedzi, znajdzie to opcję z this is your selected text plus more.
Teepeemm
4

Próbowałem kilku z tych rzeczy, dopóki nie dostałem jednego do pracy zarówno w Firefoksie, jak i IE. Właśnie to wymyśliłem.

$("#my-Select").val($("#my-Select" + " option").filter(function() { return this.text == myText }).val());

inny sposób na napisanie go w bardziej czytelnej wersji:

var valofText = $("#my-Select" + " option").filter(function() {
    return this.text == myText
}).val();
$(ElementID).val(valofText);

Pseudo kod:

$("#my-Select").val( getValOfText( myText ) );
użytkownik2561852
źródło
Ma to
Jaki jest sens "#my-Select" + " option"? Dlaczego nie tylko "#my-Select option"?
Teepeemm
3

Użyj następujących

$('#select option:contains(ABC)').val();
Dadaso Zanzane
źródło
1
podany przez Ciebie kod może rozwiązać problem, ale dodaj krótki opis, w jaki sposób to rozwiązuje problem. Witamy w przepełnieniu stosu, zalecana lektura Jak odpowiedzieć .
Dan Beaulieu,
3
jeśli są jakieś opcje: ABC, ABCD, ABCDEF, to?
hungndv
1

Działa to w jQuery 1.6 (uwaga dwukropek przed nawiasem otwierającym), ale nie działa w nowszych wersjach (w tym czasie 1.10).

$('#mySelect option:[text=abc]")
Bartosz Firyn
źródło
5
Ciekawe, ale niestety nie działa (jQuery 1.10.2).
WynandB,
Chciałbyś załączyć, że coś takiego $("#mySelect option").filter(function() { return this.text == "abc"; });będzie działać z najnowszymi wersjami jQuery .. Lub prawdopodobnie w inny sposób, który wolisz używać ..
Fr0zenFyr
1

Dla jquery wersja 1.10.2 poniżej działała dla mnie

  var selectedText="YourMatchText";
    $('#YourDropdownId option').map(function () {
       if ($(this).text() == selectedText) return this;
      }).attr('selected', 'selected');
    });
Mir Gulam Sarwar
źródło
1

To praca dla mnie

$('#mySelect option:contains(' + value + ')').attr('selected', 'selected');
Carlos Castañeda
źródło
0

To działa dla mnie:

var result = $('#SubjectID option')
            .filter(function () 
             { return $(this).html() == "English"; }).val();

resultZmienna zwróci indeks dopasowane wartości tekstowej. Teraz ustawię go za pomocą jego indeksu:

$('#SubjectID').val(result);
Willy David Jr
źródło
-1

Albo iteruj opcje, albo umieść ten sam tekst w innym atrybucie opcji i wybierz z tym.

dekomote
źródło
-1

To też zadziała.

$ („# test”). find („wybierz opcję: zawiera („ B ”)”). filter („: selected”);

Tjcool
źródło
2
Spowoduje to również skorzystanie z opcji ABC.
Teepeemm,
-1

Jak opisano w tej odpowiedzi , możesz łatwo utworzyć własny selektor dla hasText. Pozwala to znaleźć opcję za pomocą$('#test').find('option:hastText("B")').val();

Oto dodana przeze mnie metoda hasText:

 if( ! $.expr[':']['hasText'] ) {
     $.expr[':']['hasText'] = function( node, index, props ) {
       var retVal = false;
       // Verify single text child node with matching text
       if( node.nodeType == 1 && node.childNodes.length == 1 ) {
         var childNode = node.childNodes[0];
         retVal = childNode.nodeType == 3 && childNode.nodeValue === props[3];
       }
       return retVal;
     };
  }
wbdarby
źródło
-2

To działa dla mnie

var options = $(dropdown).find('option');
var targetOption = $(options).filter(
function () { return $(this).html() == value; });

console.log($(targetOption).val());

Dzięki za wszystkie posty.

jayson.centeno
źródło