¿Cómo verificar si una opción está seleccionada?


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

Aparentemente, el isCheckedno funciona. ¿Entonces mi pregunta es cuál es la forma correcta de hacer esto? Gracias.


2
00zebra00, gracias por encontrar una respuesta entre las muchas opciones a continuación. Sin embargo, asegúrese de tomar nota de la conversación en los comentarios a continuación sobre 'la mejor' forma de acceder a la propiedad seleccionada. La idea general es que cuando se puede acceder a un elemento directamente en javascript (usando this.selected) que usted debe de derivación usando jQuery ( $(this).prop("selected")) sino que lo hará tanto trabajo por usted.
veeTrain

Respuestas:


263

ACTUALIZAR

Un método jQuery más directo a la opción seleccionada sería:

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

Responder a la pregunta .is(':selected')es lo que estás buscando:

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

La forma no jQuery (posiblemente la mejor práctica) de hacerlo sería:

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

Sin embargo, si solo está buscando el valor seleccionado, intente:

$('#mySelectBox').val()

Si está buscando el texto del valor seleccionado, haga lo siguiente:

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

Echa un vistazo: http://api.jquery.com/selected-selector/

La próxima vez busque preguntas SO duplicadas:

Obtener la opción seleccionada actual o Establecer la opción seleccionada o ¿Cómo obtener $ (esta) opción seleccionada en jQuery? o la opción [selected = true] no funciona


Utiliza jQuery sin ninguna buena razón. use las propiedades nativas js DOM. echar un vistazo a esto
gdoron está apoyando Mónica

3
Parece que no leíste mi respuesta. this.selectedse puede usar en lugar de $(this).is(":selected"), supongo que no hay necesidad de un jsperf para esto, ¿verdad? No tengo nada en contra de usar jQuery !, pero úsalo cuando lo necesites, no cuando solo da más gastos generales y más código.
Gdoron está apoyando a Mónica el

@gdoron this.selectedes completamente válido pero pidió la forma correcta de jQuery para hacerlo.
iambriansreed

2
@gdoron Estoy totalmente de acuerdo contigo. Tal vez aquellos de nosotros criados en jQuery necesitamos tomar una clase de JavaScript correctiva. :)
iambriansreed

2
@gmoron No, mi pregunta fue rechazada y votada. Buen trabajo de detective sin embargo.
iambriansreed

26

Puede obtener la opción seleccionada de esta manera:

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

DEMO EN VIVO

Pero si desea iterar todas las opciones, hágalo en this.selectedlugar de this.isCheckedlo que no existe:

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

DEMO EN VIVO

Actualizar:

Tienes muchas respuestas que te sugieren usar esto:

$(this).is(':selected')bueno, se puede hacer mucho más rápido y fácil, this.selected¿por qué debería usarlo y no el método de elemento DOM nativo?

Lea Conozca sus propiedades y funciones DOM en la información de la jQuery etiqueta


1
@downvoter, ¿quieres comentar? ¡Sal de las sombras y lucha! :)
gdoron apoya a Monica el

Tal vez porque no respondiste la pregunta, pero diste las mejores prácticas ;)
iambriansreed

1
@iambriansreed. ¡¿Decir ah?! ¿No respondí la pregunta? ¿Qué parte de la pregunta quedó sin respuesta?
Gdoron está apoyando a Mónica el

2
Discusiones interesantes aquí. :) No estoy seguro de por qué todos los DV, pero yo usé todos los UV this.selected. Estoy de acuerdo con sus comentarios sobre el uso excesivo / abuso de jQuery. Parte de conocer jQuery, es saber cuándo no usarlo. Dicho esto, tenga en cuenta que el ':selected'selector es un selector Sizzle personalizado, por lo que su uso deshabilita el uso de los querySelectorAllnavegadores compatibles. Ciertamente no es el fin del mundo, ya que proporciona un código breve y agradable, pero personalmente tiendo a evitar las cosas solo de Sizzle.

@gdoron Cuando apuntaste esta pregunta en Meta, me interesé. Con respecto a DV, este nodo puede ser útil para usted.
VisioN

4

Si no está familiarizado o no se siente cómodo is(), simplemente puede verificar el valor de prop("selected").

Como se ve aquí :

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

Editar :

Como @gdoron señaló en los comentarios, la forma más rápida y adecuada de acceder a la propiedad seleccionada de una opción es a través del selector DOM. Aquí está la actualización de violín que muestra esta acción.

if (this.selected == true) {

parece funcionar igual de bien! Gracias gdoron.


¿Puede explicarme por qué debería usarlo en $(this).prop("selected")lugar de this.selected? ¡¿¿Qué te da??! ps no soy el downvoter ...
gdoron está apoyando Mónica

@gdoron, la principal ventaja en la que pensaba era la familiaridad. No estoy seguro de qué isse usa mejor, pero me gusta acceder a mis propiedades por prop y attr. En la mayoría de los escenarios, puede ser solo una cuestión de gustos. Sí, ¡hay una curiosa erupción de votos negativos!
veeTrain

2
Sugiero leer la parte Conozca sus propiedades y funciones DOM de la jQuery información de la etiqueta . no hay razón para usar un código más lento + más código para hacer algo simple. .is()debe usarse para un selector complicado como $(...).is('.foo > [name="aaa"] input') or for properties that are not native DOM elements properties like $ (...). is (": visible").
Gdoron está apoyando a Mónica el

@gdoron; Muchas gracias por señalarlo. He actualizado mi respuesta en consecuencia.
veeTrain

No hay problema. Puedes votar mi respuesta si crees que es mejor que los demás. (No quiero $(this).is(':selected')que se acepte la respuesta . Stackoverflow debería usarse para aprender las mejores prácticas, no los errores comunes ...)
gdoron está apoyando a Monica el

3

Puedes usarlo de esta manera con 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

utilizar

 $("#mySelectBox option:selected");

para probar si es una opción particular myoption:

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

¿No te voté en contra (hay un downvote en serie aquí) pero, ¿qué es myoption?
Gdoron está apoyando a Mónica el

1
solo una cadena que se supone que es una opción de ejemplo que el OP quiere probar si está seleccionada
Mouna Cheikhna

Con respecto al voto negativo, es posible que desee leer los comentarios debajo de mi respuesta .
gdoron está apoyando a Monica el

2

Considere esto como su lista de selecció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>

luego marca la opción seleccionada de esta manera:

function doSomething(param) {

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

}

0

En mi caso, no sé por qué seleccionado siempre es cierto. Entonces, la única forma en que pude pensar es:

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

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

0

Si solo desea verificar si una opción está seleccionada, entonces no necesita recorrer todas las opciones. Solo haz

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

Nota: Si tiene una opción con valor = 0 que desea que se pueda seleccionar, debe cambiar la condición if a $('#mySelectBox').val() != null


0

Si necesita verificar la opción de estado seleccionado para un valor específico :

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

0

Si desea verificar la opción seleccionada a través de JavaScript

El método más simple es agregar el atributo onchange en esa etiqueta y definir una función en el archivo js, ​​ver ejemplo si su archivo html tiene opciones como 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>

Y ahora agregue la función en el archivo js

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

Si desea verificar la opción seleccionada en el archivo php

Simplemente ingrese el atributo de nombre en su etiqueta y acceda a su variable / matriz global del archivo php ($ _GET o $ _POST). Vea un ejemplo si su archivo html es algo como esto

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

Y en su archivo php validation.php puede acceder de esta manera

$subject = $_POST['subject'];
echo "selected option is $subject";
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.