Bir seçeneğin seçilip seçilmediğini nasıl kontrol edebilirim?


150
$('#mySelectBox option').each(function() {
    if ($(this).isChecked())
       alert('this option is selected');
     else
       alert('this is not');
});

Görünüşe göre isCheckedişe yaramıyor. SO sorum şu, bunu yapmanın doğru yolu nedir? Teşekkürler.


2
00zebra00, aşağıdaki birçok seçenek arasından bir cevap bulduğunuz için teşekkürler. Ancak, lütfen aşağıdaki yorumlarda seçilen mülke erişmenin 'en iyi' yolu hakkındaki konuşmaya dikkat edin. Genel özü Eğer javascript doğrudan bir öğe erişebilirsiniz zaman (kullanarak yani this.selectedjQuery kullanarak baypas gerektiği (yani) $(this).prop("selected")) ama onlar olacak sizin için hem iş.
veeTrain

Yanıtlar:


270

GÜNCELLEME

Seçilen seçeneğe göre daha doğrudan bir jQuery yöntemi şöyle olacaktır:

var selected_option = $('#mySelectBox option:selected');

Soruyu cevaplamak, .is(':selected')aradığınız şeydir:

$('#mySelectBox option').each(function() {
    if($(this).is(':selected')) ...

Bunu yapmanın jQuery olmayan (muhtemelen en iyi uygulama) yolu şudur:

$('#mySelectBox option').each(function() {
    if(this.selected) ...

Yine de, sadece seçilen değeri arıyorsanız, şunu deneyin:

$('#mySelectBox').val()

Seçilen değerin metnini arıyorsanız şunları yapın:

$('#mySelectBox option').filter(':selected').text();

Kontrol edin: http://api.jquery.com/selected-selector/

Bir dahaki sefere yinelenen SO sorularını arayın:

Seçili seçeneğini alın veya Set seçilen seçeneği ya nasıl $ jQuery (this) seçilen seçeneği alınır? veya seçenek [selected = true] çalışmıyor


İyi bir sebep olmaksızın jQuery kullanır. yerel js DOM özelliklerini kullanın. üzerinde bir göz atın bu
gdoron Monica destekliyor

3
Görünüşe göre cevabımı okumamışsın. this.selectedBunun $(this).is(":selected")için jsperf'e gerek yok sanırım yerine kullanılabilir , değil mi? JQuery! Kullanmaya karşı hiçbir şeyim yok, ancak ihtiyacınız olduğunda kullanın, ek yük ve daha fazla koddan başka hiçbir şey vermeyin.
gdoron Monica'yı destekliyor

@gdoron this.selectedtamamen geçerli ancak bunu yapmak için uygun jQuery yolunu istedi.
iambrians

2
@gdoron Sana tamamen katılıyorum. Belki jQuery'de yetiştirilenlerimizin düzeltici bir JavaScript dersi alması gerekiyor. :)
iambriansreed

2
@gmoron Hayır, sorum aşağı oylandı ve yukarı oylandı. İyi bir dedektiflik işi.
iambrians

26

Seçilen seçeneği şu şekilde alabilirsiniz:

$('#mySelectBox option:selected')...

CANLI DEMO

Eğer yineleme tüm seçenekleri istiyorsanız, bunu yapmak this.selectedyerine this.isCheckedhangi yok:

$('#mySelectBox option').each(function() {
    if (this.selected)
       alert('this option is selected');
     else
       alert('this is not');
});

CANLI DEMO

Güncelleme:

Bunu kullanmanızı öneren birçok cevabınız var:

$(this).is(':selected')peki, çok daha hızlı ve kolay bir şekilde yapılabilir, this.selectedöyleyse neden yerel DOM öğesi yöntemini değil de onu kullanmalısınız ?!

Oku Kişisel DOM Özellikleri ve İşlevleri bilin içinde jQuery etiketi bilgi


1
@downvoter, yorum yapmak ister misin? gölgelerden çık ve savaş! :)
gdoron Monica'yı destekliyor

Belki soruyu cevaplamadığın için en iyi uygulamayı yaptığın için. ;)
iambrians

1
@yavbirah Ha?! Soruya cevap vermedim sorunun hangi bölümü cevapsız kaldı?
gdoron Monica'yı destekliyor

2
Burada ilginç tartışmalar. :) Neden tüm DV'lerin olduğundan emin değilim, ama kullanan herkesi UV'ledim this.selected. JQuery'nin aşırı kullanımı / kötüye kullanımı hakkındaki yorumlarınıza katılıyorum. Ne zaman jQuery bilmenin kısmı bilmektir değil kullanabilirsiniz. Bununla birlikte, ':selected'seçicinin özel bir Sizzle seçici olduğunu unutmayın, bu nedenle onu kullanmak querySelectorAlldesteklenen tarayıcılarda kullanımını devre dışı bırakır . Kesinlikle dünyanın sonu değil, çünkü bazı güzel, kısa kodlar sağlıyor, ama ben şahsen sadece Sizzle içeren şeylerden kaçınma eğilimindeyim.

@gdoron Meta'da bu soruyu işaret ettiğiniz için ilgimi çekti. DV ile ilgili olarak, bu düğüm sizin için yararlı olabilir.
VisioN

5

Aşina değilseniz veya rahat is()değilseniz, değerini kontrol edebilirsiniz prop("selected").

Burada görüldüğü gibi :

$('#mySelectBox option').each(function() {
    if ($(this).prop("selected") == true) {
       // do something
    } else {
       // do something
    }
});​

Düzenle :

@Gdoron'un yorumlarda belirttiği gibi, bir seçeneğin seçilen özelliğine erişmenin daha hızlı ve en uygun yolu DOM seçicisidir. İşte bu eylemi gösteren keman güncellemesi .

if (this.selected == true) {

aynı şekilde çalışıyor gibi görünüyor! Teşekkürler gdoron.


Neden $(this).prop("selected")yerine kullanması gerektiğini bana açıklar this.selectedmısınız? sana ne veriyor? ps Olumsuz oy veren ben değilim ...
gdoron Monica'yı destekliyor

@gdoron, aklıma gelen en büyük avantaj aşinalıktı. Neyin isen iyi kullanıldığından emin değilim , ancak özelliklerime prop ve attr ile erişmeyi seviyorum. Çoğu senaryoda bu sadece bir zevk meselesi olabilir. Evet, tuhaf bir aşağı oylama döküntüsü var!
veeTrain

2
Etiket bilgilerinin DOM Özelliklerinizi ve İşlevlerinizi Tanıyın bölümünü okumanızı öneririm . Basit bir şey yapmak için daha yavaş kod + daha fazla kod kullanmak için hiçbir neden yoktur. $ (...). is (": Visiable") gibi karmaşık seçici için kullanılmalıdır . jQuery .is()$(...).is('.foo > [name="aaa"] input') or for properties that are not native DOM elements properties like
gdoron Monica'yı destekliyor

@gdoron; Bunu işaret ettiğiniz için çok teşekkürler. Cevabımı buna göre güncelledim.
veeTrain

Sorun yok. Diğerlerinden daha iyi olduğunu düşünüyorsan cevabımı yükseltebilirsin. (Cevabın $(this).is(':selected')kabul edilmesini istemiyorum . En iyi uygulamaları öğrenmek için Stackoverflow kullanılmalı, yaygın hatalar değil ...)
gdoron Monica'yı destekliyor

3

Bu yolu jquery ile kullanabilirsiniz:

$(document).ready(function(){
 $('#panel_master_user_job').change(function () {
 var job =  $('#panel_master_user_job').val();
 alert(job);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="job" id="panel_master_user_job" class="form-control">
                                    <option value="master">Master</option>
                                    <option value="user">User</option>
                                    <option value="admin">Admin</option>
                                    <option value="custom">Custom</option>
                                </select>


2

kullanım

 $("#mySelectBox option:selected");

bunun belirli bir seçenek olup olmadığını test etmek için myoption:

 if($("#mySelectBox option:selected").text() == myoption){
          //...
 }

Size olumsuz oy vermedim (burada bir dizi olumsuz oy var!) Ama nedir myoption???
gdoron Monica'yı destekliyor

1
sadece OP'nin seçili ise test etmek istediği örnek bir seçenek olması beklenen bir dize
Mouna Cheikhna

Downvote ile ilgili olarak, sen altında yorumlarını okumak isteyebilirsiniz cevabım .
gdoron Monica'yı

2

Bunu seçim listeniz olarak düşünün:

<select onchange="var optionVal = $(this).find(':selected').val(); doSomething(optionVal)">

                                <option value="mostSeen">Most Seen</option>
                                <option value="newst">Newest</option>
                                <option value="mostSell">Most Sell</option>
                                <option value="mostCheap">Most Cheap</option>
                                <option value="mostExpensive">Most Expensive</option>

                            </select>

sonra aşağıdaki gibi seçilen seçeneği işaretlersiniz:

function doSomething(param) {

    if ($(param.selected)) {
        alert(param + ' is selected!');
    }

}

0

Benim durumumda, neden seçilmişin her zaman doğru olduğunu bilmiyorum. Yani düşünebilmemin tek yolu şuydu:

var optionSelected = false;
$( '#select_element option' ).each( function( i, el ) {
    var optionHTMLStr = el.outerHTML;

    if ( optionHTMLStr.indexOf( 'selected' ) > 0 ) {
        optionSelected = true;
        return false;
    }
});

0

Yalnızca bir seçeneğin seçilip seçilmediğini kontrol etmek istiyorsanız, tüm seçenekleri yinelemenize gerek yoktur. Sadece yap

if($('#mySelectBox').val()){
    // do something
} else {
    // do something else
}

Not: Değer = 0 olan ve seçilebilir olmasını istediğiniz bir seçeneğiniz varsa, if koşulunu şu şekilde değiştirmeniz gerekir: $('#mySelectBox').val() != null


0

Belirli bir değer için seçilen seçeneği işaretlemeniz gerekiyorsa :

$('#selectorId option[value=YOUR_VALUE]:selected')

0

Seçilen seçeneği javascript üzerinden kontrol etmek istiyorsanız

En basit yöntem, bu etikete onchange niteliği eklemek ve js dosyasında bir işlev tanımlamaktır, örneğe bakın html dosyanızda bunun gibi seçenekler varsa

 <select onchange="subjects(this.value)">
               <option>Select subject</option>
               <option value="Computer science">Computer science</option>
               <option value="Information Technolgy">Information Technolgy</option>
               <option value="Electronic Engineering">Electronic Engineering</option>
               <option value="Electrical Engineering">Electrical Engineering</option>
 </select>

Ve şimdi js dosyasına fonksiyon ekleyin

function subjects(str){
    console.log(`selected option is ${str}`);
}

Php dosyasında seçilen seçeneği kontrol etmek istiyorsanız

Etiketinize isim niteliği verin ve ona erişin php dosyası global değişkenler / dizi ($ _GET veya $ _POST) html dosyanızın böyle bir şey olup olmadığına bakın

<form action="validation.php" method="POST">
             Subject:<br>
            <select name="subject">
               <option>Select subject</option>
               <option value="Computer science">Computer science</option>
               <option value="Information Technolgy">Information Technolgy</option>
               <option value="Electronic Engineering">Electronic Engineering</option>
               <option value="Electrical Engineering">Electrical Engineering</option>
            </select><br>

         </form>

Ve php dosyanızın validation.php'sinde bu şekilde erişebilirsiniz

$subject = $_POST['subject'];
echo "selected option is $subject";
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.