Seleccionar una opción por defecto de un select con jQuery

En este artículo vamos a ver una línea de código interesante que nos podría resultar de gran utilidad cuando queremos seleccionar por defecto una opción de un dropdown, selector de opciones o lista desplegable con jQuery.

Bien es cierto que puedes pensar que sería mucho más sencillo establecer el atributo «selected» directamente en la opción que deseemos del selector de la siguiente forma y listo:

<option value="3" selected="selected">España</option>

No es el caso que queremos ilustrar. De esta forma sería muy sencillo pero, en algunos casos o situaciones no resulta posible hacer esto y una buena solución que te puede sacar de un apuro es utilizar jQuery para indicar o seleccionar una opción por defecto de un selector.

En el ejemplo que tenemos en funcionamiento tenemos una lista desplegable de países donde vamos a dejar marcado por defecto la opción de «España» utilizando jQuery.

En la cabecera de la página o dentro de la etiqueta <head> agregaremos la librería jQuery y el código que permite realizar la selección de una opción por defecto. Tan solo es una linea de código.

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#id_country > option[value="3"]').attr('selected', 'selected');
});
</script>

El selector de países lo tenemos dentro de un formulario en alguna parte del cuerpo o etiqueta <body> de la página:

<form method="post" class="row">
    <div class="form-group col-lg-6">
        <label>País</label>
        <select name="id_country" id="id_country" class="form-control">
            <option value="1">Alemania</option>
            <option value="2">Francia</option>
            <option value="3">España</option>
            <option value="4">Inglaterra</option>
            <option value="5">Portugal</option>
            <option value="6">Italia</option>
        </select>
    </div>
</form>

Al cargar la página del ejemplo podrás observar que por defecto la opción con value=»3″ queda seleccionada que, en este caso particular, sería España.

Ver demo Descargar

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(16 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

9 respuestas a “Seleccionar una opción por defecto de un select con jQuery”

  1. Oscar dice:

    Gracias amigo, me sirvio la solución planteada.

  2. Rafael dice:

    var status = $(‘#Estatus’).val(datos[0].estatus).val();
    $(‘#Estatus option’).filter(‘[value=»‘ + status + ‘»]’).attr(‘selected’, ‘selected’);

    y

    $(‘#Estatus option’).filter(‘[value=»‘ + val + ‘»]’).prop(‘selected’, ‘selected’);

    No se cual sea la diferencia. del attr y prop. pero resulto.

  3. Rafael dice:

    Increible… Gracias.

  4. jaime gonzalez dice:

    Saludos… antes que nada . gracias tu pagina ha sido de gran ayuda.

    tengo un problema ojala puedas ayudarme..
    tengo un select cuyo svalores estan cargados por base de datos
    al seleccionar uno de los valores se despliega en un inputext relacionado a lo selecionado. pero al abrir la pagina el inputext sale en blanco y tengo q volver a cargar el selecta mano.. tendras alguna idea como hacer para que el unput detecte el selec y se asignen los valoreS??

  5. jose dice:

    te amo

  6. MARITZA ALANYA dice:

    DESEO SELECCIONAR EL TIPO DE OPERADOR Y NO MUESTRA OPCIONES SOLO SELECCIONAR

  7. neto dice:

    muchas gracias, me fue de gran ayuda
    saludos ………!!!!

  8. iAcobuS dice:

    Si tenemos un select, por ejemplo con id=»rol», y queremos seleccionar uno de los valores del options, queda más limpio el siguiente código:
    //———————————————–
    var selectRol = $(«select#rol»);
    selectRol.val(data.rolOutput).attr(‘selected’, ‘selected’);
    //———————————————–
    Nota: ‘data.rolOutput’ es el valor que nos devuelve por ejemplo una consulta AJAX a BBDD. Podemos modificar esta variable por el valor que queremos seleccionar.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre