Como verificar se uma opção está selecionada?


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

Aparentemente, o isCheckednão funciona. Então, minha pergunta é qual é a maneira correta de fazer isso? Obrigado.


2
00zebra00, obrigado por encontrar uma resposta entre as muitas opções abaixo. No entanto, certifique-se de notificar a conversa nos comentários abaixo sobre a 'melhor' maneira de acessar a propriedade selecionada. A essência geral é que, quando você pode acessar um elemento diretamente em javascript (usando this.selected) que você deve ignorar usando jQuery ( $(this).prop("selected")), mas eles vão tanto trabalho para você.
precisa

Respostas:


263

ATUALIZAR

Um método jQuery mais direto para a opção selecionada seria:

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

Responder à pergunta .is(':selected')é o que você está procurando:

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

A maneira não-jQuery (sem dúvida a melhor prática) de fazer isso seria:

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

Porém, se você está apenas procurando o valor selecionado, tente:

$('#mySelectBox').val()

Se você estiver procurando pelo texto do valor selecionado, faça:

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

Confira: http://api.jquery.com/selected-selector/

Da próxima vez, procure por perguntas SO duplicadas:

Obter a opção selecionada atual ou Definir opção selecionada ou Como obter a opção selecionada $ (this) no jQuery? ou a opção [selected = true] não funciona


Ele usa jQuery sem um bom motivo. use as propriedades DOM nativas do js. dar uma olhada no presente
gdoron está apoiando Monica

3
Parece que você não leu minha resposta. this.selectedpode ser usado em vez de $(this).is(":selected")eu acho que não há necessidade de um jsperf para isso, certo? Não tenho nada contra o uso do jQuery !, mas use-o quando você precisar, não quando ele fornecer nada além de sobrecarga e mais código.
Gdoron está apoiando Monica

@gdoron this.selectedé completamente válido, mas ele pediu a maneira correta do jQuery de fazer isso.
precisa saber é o seguinte

2
@ Gdoron Eu concordo totalmente com você. Talvez aqueles que foram criados no jQuery precisem fazer uma aula de JavaScript corretiva. :)
iambriansreed 18/04/12

2
@ gmoron Não, minha pergunta foi votada para baixo e votada para cima. Bom trabalho de detetive.
Iambriansreed

26

Você pode obter a opção selecionada desta maneira:

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

DEMONSTRAÇÃO AO VIVO

Mas se você quiser iterar todas as opções, faça-o em this.selectedvez de this.isCheckednão existir:

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

DEMONSTRAÇÃO AO VIVO

Atualizar:

Você tem muitas respostas sugerindo que você use isso:

$(this).is(':selected')bem, isso pode ser feito com muito mais rapidez e facilidade this.selected, por que você deve usá-lo e não o método do elemento DOM nativo ?!

Leia Conheça as propriedades e funções do seu DOM nas informações da jQuery tag


1
@ downvoter, gostaria de comentar? saia das sombras e lute! :)
gdoron está apoiando Monica

Talvez porque você não respondeu à pergunta, mas deu as melhores práticas. ;)
iambriansreed 18/04/12

1
@iambriansreed. Ha ?! Eu não respondi a pergunta? que parte da pergunta permaneceu sem resposta?
Gdoron está apoiando Monica

2
Discussões interessantes aqui. :) Não sei por que todos os DVs, mas usei UV todos que usavam this.selected. Concordo com seus comentários sobre o uso excessivo / abuso do jQuery. Parte de conhecer o jQuery, é saber quando não usá-lo. Dito isso, lembre-se de que o ':selected'seletor é um seletor Sizzle personalizado; portanto, o uso desabilita o uso querySelectorAllem navegadores suportados. Certamente não é o fim do mundo, pois fornece um código curto e agradável, mas eu pessoalmente tendem a evitar as coisas apenas do Sizzle.

@gdoron Como você apontou essa pergunta no Meta, fiquei interessado. Em relação ao DV, esse nó pode ser útil para você.
VisioN

4

Se você não estiver familiarizado ou à vontade is(), basta verificar o valor de prop("selected").

Como visto aqui :

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

Editar :

Como @gdoron apontou nos comentários, a maneira mais rápida e apropriada de acessar a propriedade selecionada de uma opção é através do seletor DOM. Aqui está a atualização do violino que exibe esta ação.

if (this.selected == true) {

parece funcionar tão bem! Obrigado gdoron.


Você pode me explicar por que ele deveria usar em $(this).prop("selected")vez de this.selected?! o que isso te dá ??! ps Eu não sou o defensor ...
gdoron está apoiando Monica 18/04

@gdoron, a principal vantagem que pensei foi a familiaridade. Não tenho certeza do que isé melhor usado, mas gosto de acessar minhas propriedades por prop e attr. Na maioria dos cenários, pode ser apenas uma questão de gosto. Sim, há uma erupção curiosa de baixa votação!
veeTrain

2
Sugiro ler a parte Conheça as propriedades e funções do DOM nas jQuery informações da tag . não há razão para usar código mais lento + mais código para fazer coisas simples. .is()deve ser usado para seletores complicados como $(...).is('.foo > [name="aaa"] input') or for properties that are not native DOM elements properties like $ (...). is (": visiable").
Gdoron está apoiando Monica

@gdoron; muito obrigado por apontar isso. Atualizei minha resposta de acordo.
veeTrain

Sem problemas. Você pode votar a minha resposta se achar melhor que as outras. (Eu não quero a resposta com $(this).is(':selected')para ser aceito Stackoverflow deve ser usado para aprender as melhores práticas, e não erros comuns ....)
gdoron está apoiando Monica

3

Você pode usar este caminho por jquery:

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

usar

 $("#mySelectBox option:selected");

para testar se é uma opção específica myoption:

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

Não votou em você (há uma votação em série aqui!), Mas o que é myoption???
Gdoron está apoiando Monica

1
apenas uma cadeia que é suposto ser uma opção exemplo, que o OP quer testar se o seu selecionado
Mouna Cheikhna

Em relação ao voto negativo, você pode querer ler os comentários em minha resposta .
gdoron está apoiando Monica

2

Considere isso como sua lista de seleção:

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

então você marca a opção selecionada assim:

function doSomething(param) {

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

}

0

No meu caso, não sei por que o selecionado é sempre verdadeiro. Então, a única maneira de pensar é:

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

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

0

Se você quiser apenas verificar se uma opção está selecionada, não precisará percorrer todas as opções. Apenas faça

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

Nota: Se você tiver uma opção com o valor = 0 que deseja selecionar, precisará alterar a condição if para $('#mySelectBox').val() != null


0

Se você precisar verificar o estado selecionado da opção para obter um valor específico :

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

0

Se você deseja verificar a opção selecionada através de javascript

O método mais simples é adicionar o atributo onchange nessa tag e definir uma função no arquivo js. Veja o exemplo se o seu arquivo html tiver opções parecidas com esta

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

E agora adicione a função no arquivo js

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

Se você quiser marcar a opção selecionada no arquivo php

Simplesmente dê o atributo name na sua tag e acesse o arquivo php global variables / array ($ _GET ou $ _POST) veja o exemplo se o seu arquivo html é algo como isto

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

E no seu arquivo php validation.php você pode acessar assim

$subject = $_POST['subject'];
echo "selected option is $subject";
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.