Metnine göre bir seçenek seçmek için hangi seçiciye ihtiyacım var?


207

Ben <select>bir metni belirli bir değere eşit bir seçenek olup olmadığını kontrol etmek gerekir .

Örneğin, bir <option value="123">abc</option>"abc" ararım.

Bunu yapmak için bir seçici var mı?

Ben benzer bir şey arıyorum $('#select option[value="123"]');ama metin için.


Hmm ... hasSLaks'ın cevabı faydalı, ama Floyds cevabındaki nokta da iyi ... Ne kabul edeceğimi bilmiyorum.
Hailwood

ayrıca, bunlar büyük / küçük harfe duyarlı mı? (büyük / küçük harfe duyarsızlık arıyorum ve her zaman sadece daha düşük bir seviyeye dönüştürebilirsiniz
Hailwood

1
JavaScript çekirdek işlevi .toLowerCase () kullanın ve büyük / küçük harf duyarsızlığı gerekiyorsa karşılaştırın. Ayrıca, sorulan soru için en yararlı olanı cevap olarak kabul edin. :)
Hari Pachuveetil

multiselect API'sı olan bir açılır liste için çalışmıyor ?? Şanssız tüm olası çözümleri denedim. Eric hynd'nin multiselect dropdowm API'sini kullanıyorum. Herkes bu sorunu çözebilir mi?
Chaitanya Chandurkar

Yanıtlar:


320

Bu yardımcı olabilir:

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

Demo keman

Bu, size metin Biçerenleri değil, metin seçeneği sunar B. Bu yardımcı olur umarım

JQuery'nin son sürümleri için yukarıdaki çalışmaz.Aşağıdaki Quandary tarafından yorumlandığı gibi, jQuery 1.9.1 için çalışan budur:

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

Güncellenmiş keman


1
bu,
jquery'nin

27
@KevinDeus: Neden intikam !? Cevap o zaman jQuery versiyonu içindi!
Hari Pachuveetil

11
Bunun yerine, $ ('# test option'). Filter (function () {return $ (this) .html () == "B";}). Val ();
Stefan Steiger

84
@Quandary Yine de, kısa bir yorum yeterli olduğunda cevabı oylamak için geçerli bir neden değil. Yoksa her yeni jQuery sürümü için tüm cevaplarını tekrar test etmesini mi bekliyorsunuz?
WynandB

2
Ben aşağı vekil yukarıdaki örnek sadece seçilen değeri bulmak ve seçilen değeri ayarlamıyor nedeniyle düşünüyorum.
nivs1978

133

Belirli bir metni içeren öğeleri seçmek için :contains()seçiciyi kullanabilirsiniz .
Örneğin:

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

Belirli bir <select>öğenin böyle bir seçeneği olup olmadığını kontrol etmek için .has()yöntemi kullanın :

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

<select>Böyle bir seçenek içeren tüm seçenekleri bulmak için :has()seçiciyi kullanın :

$('select:has(option:contains(abc))')

3
:containsşimdi kesin değil, değil mi?
Hari Pachuveetil

İçerdiği sorun tam olarak nedir?
Ogier Schelvis

bunu yalnızca seçili seçeneklerle nasıl yapardınız?
toddmo

Bu da bir seçenek almıyor mu 123abcdef?
Teepeemm

@Teepeemm Evet, bu iki önemli cevap arasındaki fark. Yalnızca üstteki denetimler seçeneği yalnızca belirli bir metinle döndürür; bu, yalnızca belirli metni içeren seçeneği değil, aynı metni içeren seçeneği de döndürür. Bu, tesadüfen, şu anda gerçekten ihtiyacım olan şey, bu yüzden yayınladığım için çok memnunum.
Lee

30

Önceki önerilerin hiçbiri jQuery 1.7.2 benim için çalıştı çünkü bir metin kutusundaki değere göre listenin seçilen dizinini ayarlamak çalışıyorum ve bazı metin değerleri birden çok seçenek bulunur. Aşağıdaki kullanarak sona erdi:

$('#mySelect option:contains(' + value + ')').each(function(){
    if ($(this).text() == value) {
        $(this).attr('selected', 'selected');
        return false;
    }
    return true;
});

1
Bunun en iyi cevap olduğunu düşünüyorum çünkü doğru sonuçları döndürüyor. Ama yardım edemem ama containstamamen atlamayı düşünmek işleri hızlandırabilir.
styfle

Bu benim için çalıştı ama benim senaryoda bir ızgara üzerinde düzenleme birkaç kez tıklayabilirsiniz böylece hiçbir eşleşme olmadığında seçilen öznitelik kaldırmak zorunda kaldı aksi takdirde seçilen ilk seçenek sonraki düzenlemeler için kalacaktı. else {$ (this) .attr ('seçildi', ''); yanlış döndür; }
esp

Bu çözüm benim için çalıştı, ancak seçenek özniteliğini ayarlamak yerine, aslında yapmam gereken seçim menüsünü değiştirmek için: $(this).parent().val($(this).val()); Her ikisini de yapabilirsiniz, ancak benim için sadece üst öğeyi ayarlamak val()hile yaptı.
billynoah


15

Bu benim için çalıştı: $("#test").find("option:contains('abc')");


3
Neden çalıştığına dair bir açıklama eklemelisiniz .
Hannes Johansson

@HannesJohansson Ya da en azından yaklaşık beş yaş büyük SLaks'ın cevabından nasıl farklı olduğunu veya yeni bir şey eklediğini açıklamalıdır. ; ^)
16'da

4
Bunun da bu seçeneği bulacağını bildiğinizden emin olun: <option> abcd </option>.
Charles

Teşekkürler bu kesinlikle doğrudur ve herkesin kaçırdığı şey .attr ('değer') eklemektir; sonuna kadar. Dinamik bir şekilde kullanılacak değeri elde etmenin en kolay yolu budur! Yani tam kod böyle olmalı. $("#testselect").find("option:contains('option-text')").attr('value'); bu şekilde .click()bir ayarı değiştirmek gibi bir olay kullanabilirsiniz .
ChrisKsag

12

Bu, açılır listeden metin seçmek için en iyi yöntemdir.

$("#dropdownid option:contains(your selected text)").attr('selected', true);

3
Benzer cevaplarda olduğu gibi, bu ile bir seçenek bulacaksınız this is your selected text plus more.
Teepeemm

4

Firefox ve IE'de çalışana kadar bunlardan birkaçını denedim. Ben de bunu buldum.

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

daha okunabilir bir fasionda yazmanın başka bir yolu:

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

pseudocode:

$("#my-Select").val( getValOfText( myText ) );

JQuery
Fr0zenFyr

Ne anlamı var "#my-Select" + " option"? Neden sadece "#my-Select option"?
Teepeemm

3

Aşağıdakileri kullan

$('#select option:contains(ABC)').val();

1
girdiğiniz kod sorunu çözebilir, ancak bunun sorunu nasıl çözdüğüne ilişkin kısa bir açıklama ekleyin. Stack Overflow'a hoş geldiniz, nasıl cevaplanacağını okumanızı tavsiye ederiz .
Dan Beaulieu

3
bazı seçenekler varsa: ABC, ABCD, ABCDEF, o zaman?
hungndv

1

Bu, jQuery 1.6'da çalışır (açılış parantezinden önce iki nokta üst üste not edin), ancak daha yeni sürümlerde (o sırada 1.10) başarısız olur.

$('#mySelect option:[text=abc]")

5
İlginç ama maalesef işe yaramıyor (jQuery 1.10.2).
WynandB

Böyle bir şeyin $("#mySelect option").filter(function() { return this.text == "abc"; });
jQuery'nin

1

Aşağıdaki jquery sürüm 1.10.2 için benim için çalıştı

  var selectedText="YourMatchText";
    $('#YourDropdownId option').map(function () {
       if ($(this).text() == selectedText) return this;
      }).attr('selected', 'selected');
    });

1

Bu iş benim için

$('#mySelect option:contains(' + value + ')').attr('selected', 'selected');

0

Bu benim için çalışıyor:

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

resultDeğişken eşleşti metin değerinin dizinini döndürür. Şimdi sadece dizinini kullanarak ayarlayacağım:

$('#SubjectID').val(result);

-1

Ya seçenekler arasında yineleme yaparsınız ya da aynı metni seçeneğin başka bir özniteliğine koyar ve bununla seçim yaparsınız.


-1

Bu da işe yarayacaktır.

$ ('# test'). find ("seçim seçeneği: ('B') içerir"). filtre (": seçili");


2
Bu da seçeneği yakalar ABC.
Teepeemm

-1

Bu cevapta açıklandığı gibi, hasText için kendi seçicinizi kolayca oluşturabilirsiniz. Bu seçenek ile$('#test').find('option:hastText("B")').val();

İşte eklediğim hasText yöntemi:

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

-2

Bu benim için çalışıyor

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

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

Tüm gönderiler için teşekkür ederim.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.