Seleccione la primera opción del menú desplegable usando jQuery

  2. HowTo
  3. jQuery Howtos
  4. Seleccione la primera opción del menú …
Neha Imran 21 junio 2023
jQuery jQuery Dropdown
  1. Seleccione la primera opción de la etiqueta <Select> usando jQuery
  2. Utilice la propiedad SelectedIndex
  3. Usa el método val()
  4. Usa el método prop()
  5. Usa el método attr()
Seleccione la primera opción del menú desplegable usando jQuery

Este tutorial utilizará jQuery para seleccionar la primera opción de la etiqueta seleccionar. Veremos varias estrategias de implementación de jQuery para ayudarnos a implementar la funcionalidad que queremos.

Seleccione la primera opción de la etiqueta <Select> usando jQuery

Los menús desplegables y las listas son muy familiares y útiles en nuestras páginas web. Podría ayudar a mostrar los filtros en nuestro sitio web, o podemos usarlo para crear un menú desplegable en la barra de navegación que muestre muchas páginas de las mismas categorías, todo en un solo lugar.

Independientemente de cómo lo utilicemos en nuestros sitios web, hay momentos en los que deseamos preseleccionar una opción en particular, y este es el enfoque del artículo de hoy. Vamos a hablar sobre el uso de jQuery para implementar esta función.

jQuery es una biblioteca ligera de JavaScript creada para simplificar el uso de JavaScript en sus páginas web. Discutiremos los siguientes cuatro métodos para seleccionar la primera opción de la etiqueta <select> usando jQuery.

  1. Propiedad SelectedIndex
  2. Método .val()
  3. Método .prop()
  4. Método .attr

Utilice la propiedad SelectedIndex

El índice de la opción seleccionada se establece o se devuelve en una lista desplegable mediante la propiedad selectedIndex del HTML DOM. El índice comienza en cero.

Para deseleccionar todas las opciones, introduzca un valor de -1. Si el usuario no selecciona ninguna opción, la propiedad selectedIndex devuelve -1.

Sintaxis:

  1. Devolverá la propiedad selectedIndex.

    selectObject.selectedIndex

  2. Establecerá la propiedad selectedIndex.

    selectObject.selectedIndex = número

Consulte el siguiente ejemplo para comprender el funcionamiento de esta propiedad.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $('#drop_down')[0].selectedIndex = 0;
            });
        </script>
    </head>
    <body>
        <select id="drop_down">
            <option>Value1</option>
            <option>Value2</option>
            <option>Value3</option>
        </select>
    </body>
</html>

Producción:

índice seleccionado

Veamos lo que hicimos en el código. Debemos elegir la etiqueta <select> para seleccionar la primera opción.

Entonces, al principio, seleccionamos el elemento usando el id. Puede resultarle confuso que pongamos [0] después del selector de jQuery.

Para ayudarlo a comprender esto, permítanos brindarle una explicación detallada.

Cuando usamos el selector jQuery para seleccionar un elemento en particular, nos da una matriz de los elementos seleccionados. Debido a que estamos usando ID, solo habrá un elemento en la matriz, que debe estar en el índice 0.

Debido a esto, escribimos [0] para elegir el primer índice de la matriz devuelta.

Cuando se selecciona el elemento requerido, llamamos a la propiedad selectedIndex sobre él y le asignamos el valor 0, lo que significa que elegirá la primera opción.

Establecemos 0 y no 1 porque tratamos con índices, y los índices comienzan desde 0, por lo que 0 significa el primer valor, 1 significa el segundo valor, y así sucesivamente.

Usa el método val()

El método val() implementa acciones sobre los valores de los elementos HTML. El valor de un determinado elemento se puede establecer o recuperar utilizando este método.

El método val() solo se puede aplicar a elementos HTML con una propiedad valor.

Sintaxis:

  1. Devolverá el valor del elemento seleccionado.

    $(selector).val()

  2. Establecerá el valor del elemento seleccionado al valor que especificamos.

    $(selector).val(valor)

  3. Esto utilizará una función para establecer el valor del elemento seleccionado. Si se especifica, el valor actual devuelve el valor del elemento y el parámetro índice devuelve el índice del elemento.

    $(selector).val(función(índice, valoractual))

Usaremos el método val() para seleccionar el primer elemento de una lista desplegable. Mire dos estrategias a continuación que pueden ayudarnos a lograr esa funcionalidad.

escenario 1

Podemos usar la sintaxis discutida anteriormente para seleccionar la primera o cualquier opción de la lista desplegable. Sabemos que $(selector).val(value) se usa para establecer el valor del elemento seleccionado, y también entendemos que este método funciona en el atributo value.

Entonces, primero, establezca el valor de cada etiqueta de opción en el elemento seleccionar, y luego seleccionaremos nuestra opción requerida usando el método val().

Elijamos ahora la segunda opción. Verifique el código a continuación.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $('#drop_down').val("2");
            });
        </script>
    </head>
    <body>
        <select id="drop_down">
            <option value="1">Value1</option>
            <option value="2">Value2</option>
            <option value="3">Value3</option>
        </select>
    </body>
</html>

Producción:

método de valor 1

Esto es bastante simple. Llamamos a la función val() con el valor del argumento 2 después de establecer el valor en las etiquetas opción en el campo valor.

Escenario 2

Otro método para seleccionar la primera opción es usar el método .first() de jQuery, que devuelve el primer elemento de la etiqueta seleccionada. Observe el código a continuación para entenderlo más claramente.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
               $("#drop_down").val($("#drop_down option").first().val());
            });
        </script>
    </head>
    <body>
        <select id="drop_down">
            <option value="1">Value1</option>
            <option value="2"selected>Value2</option>
            <option value="3">Value3</option>
        </select>
    </body>
</html>

Producción:

método de valor 2

Para ayudarlo a comprender este enfoque, elegimos la segunda opción como la opción seleccionada predeterminada escribiendo “seleccionado” en la etiqueta, y si no se usa jQuery, la segunda opción se mostrará como la opción seleccionada.

Sin embargo, agregamos jQuery a nuestro código y usamos el método .first() en la etiqueta opción del elemento elegido. Muestra la primera opción como la seleccionada, como se ve en la salida.

En las versiones anteriores de jQuery teníamos este método .first() como pseudoselector y para usarlo escribimos $("#drop_down").val($("#drop_down option:first").val()), pero está en desuso en las últimas versiones y no se recomienda su uso de esta manera.

Usa el método prop()

Las propiedades y los valores de los elementos seleccionados son establecidos o devueltos por la función prop(). Como podemos acceder a las propiedades mediante esta función, podemos elegir fácilmente la primera opción de la lista desplegable.

Discutamos dos métodos para implementar nuestra funcionalidad requerida usando este método.

escenario 1

Sabemos que el método prop() nos permite acceder a las propiedades del elemento. El primer enfoque que discutimos para seleccionar la opción requerida en este artículo es usar la propiedad selectedIndex.

También podemos acceder a esa propiedad usando el método prop(). Así es cómo.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#drop_down").prop("selectedIndex", 1)
            });
        </script>
    </head>
    <body>
        <select id="drop_down">
            <option>Value1</option>
            <option>Value2</option>
            <option>Value3</option>
        </select>
    </body>
</html>

Producción:

método de utilería

El código es bastante simple y fácil de entender. Le dijimos al método prop() que seleccionara el índice 1, lo que indica que se elegirá la opción dos.

Escenario 2

Acceder a la propiedad seleccionado de la etiqueta opción es otro método para elegir la opción requerida de la lista desplegable utilizando el método prop(). Con frecuencia queremos que una opción específica esté seleccionada por defecto, por lo que agregamos el atributo seleccionado a la etiqueta, indicando que la opción está seleccionada.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#drop_down option").first().prop("selected", "true");
            });
        </script>
    </head>
    <body>
        <select id="drop_down">
            <option>Value1</option>
            <option>Value2</option>
            <option>Value3</option>
        </select>
    </body>
</html>

Usa el método attr()

El método attr() tiene como objetivo establecer o devolver los valores y atributos de los elementos que han sido seleccionados. Podemos elegir fácilmente nuestra opción requerida de la lista usando este método.

Mire las dos estrategias enumeradas a continuación.

escenario 1

Hablemos de una situación particular en la que queremos elegir la primera opción no deshabilitada y queremos ignorar las opciones deshabilitadas, incluso si son las primeras. Para aprender a implementar la funcionalidad requerida, examine el código a continuación.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
               $("#drop_down option:not([disabled])").first().attr('selected','selected');
            });
        </script>
    </head>
    <body>
        <select id="drop_down" style="width:150px">
            <option selected disabled>Choose the Option</option>
            <option>Value1</option>
            <option>Value2</option>
            <option>Value3</option>
        </select>
    </body>
</html>

Primero, veamos cuál será el resultado si no usamos este método.

antes de jQuery

La opción seleccionada es la primera. Aunque está deshabilitado, aún podemos configurar su atributo seleccionado para mostrar esta opción como seleccionada.

Ahora veamos qué opción se seleccionará con nuestro código escrito anteriormente.

después de jQuery

Increíble, ¿verdad? Se elegirá el primer elemento no deshabilitado que esté disponible y se establecerá el valor de su atributo seleccionado.

Escenario 2

Otro escenario intrigante es cuando deseamos eliminar cualquier etiqueta de opción seleccionada antes de seleccionar nuestra opción deseada. Esto se puede hacer rápidamente usando algunos de los métodos de jQuery.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
               $('#drop_down').removeAttr('selected').find('option:first').attr('selected', 'selected');
            });
        </script>
    </head>
    <body>
        <select id="drop_down">
            <option>Value1</option>
            <option>Value2</option>
            <option>Value3</option>
        </select>
    </body>
</html>

Primero, llamamos al método removeAttr(), que eliminará cualquier opción seleccionada. Luego, usando el método find(), buscamos la primera opción y luego establecimos el valor de su atributo seleccionado.

Una cosa importante aquí es que usamos primero () como el pseudoselector en nuestro código, y ya discutimos que esto está obsoleto ahora. Entonces, si su navegador no lo admite, puede escribirlo como $('#drop_down').removeAttr('seleccionado').find('opción').primero().attr('seleccionado', 'seleccionado' ).

Artículo relacionado - jQuery Dropdown