Opción jQuery Mobile Selectmenu() Método

jQuery Mobile es una tecnología basada en la web que se utiliza para crear contenido receptivo al que se puede acceder en todos los teléfonos inteligentes, tabletas y computadoras de escritorio.

En este artículo, utilizaremos el método jQuery Mobile Selectmenu option() . Usando este método, podemos obtener, establecer o actualizar el valor de cualquier parámetro del widget Selectmenu. También podemos obtener todas las opciones como pares clave-valor utilizando este método.

Sintaxis:  

1. Si necesitamos el valor de alguna opción, pase el nombre de la opción en el método option(optionName) . El optionName debe ser una string.

  • optionName: Es la entrada que necesitamos pasar en forma de string para la cual necesitamos obtener el valor.
  • return: Obtenemos el respectivo retorno en base al tipo de dato de la opción.
var isDisabled = $( ".selector" ).selectmenu( "option", "disabled" );

2. Obtenga todas las opciones con sus valores como pares clave-valor simplemente llamando al método de opción sin parámetros.

  • entrada: necesitamos llamar al método de opción . No se debe pasar nada como entrada.
  • return: Obtenemos la lista de pares clave-valor de todas las opciones como optionName – optionValue.
var options = $( ".selector" ).selectmenu( "option" );

3. Establezca el valor de cualquier opción llamando a la opción (nombre de la opción, valor) con el nombre de la opción y el valor como parámetros

  • optionName: el nombre de la opción es el primer parámetro, que es de tipo string.
  • value: al llamar al método, debemos pasar el valor de la opción, que es del tipo de objeto.
$( ".selector" ).selectmenu( "option", "disabled", true );

4) Para configurar varias opciones en lugar de una sola, llame al método de opción (opciones) donde las opciones son la lista de opciones.

  • options: Es el mapa de los pares opciónNombre-valor para establecer las opciones correspondientes a los valores pasados, que es del tipo objeto.
$( ".selector" ).selectmenu( "option", { disabled: true } );

Enlace CDN: Primero, agregue los scripts de jQuery Mobile necesarios para su proyecto.

<enlace rel=”hoja de estilo” href=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css”><script src=” //code.jquery.com/jquery-3.2.1.min.js”></script>
<script src=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile- 1.5.0-alpha.1.min.js”></secuencia de comandos>

Ejemplo: Este ejemplo describe el método jQuery Mobile Selectmenu option() .

HTML

<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content=
"width=device-width, initial-scale=1">
    <link rel="stylesheet" 
          href=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
    <script src=
"//code.jquery.com/jquery-3.2.1.min.js">
    </script>
    <script src=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js">
    </script>
    <style>
        .highlight {
            border: 5px solid green;
        }
    </style>
</head>
  
<body>
    <center>
        <div data-role="page">
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
            <h3>jQuery Mobile Selectmenu option() Method</h3>
            <div role="main" class="ui-content">
                <label for="GFG" class="select">
                    GeeksforGeeks Courses:
                </label>
                <select name="GFG" id="GFG">
                    <option value="C">C Programming</option>
                    <option value="CPP">C++ Programming</option>
                    <option value="JAVA">Java Programming</option>
                    <option value="overnight">Python Programming</option>
                    <option value="WEB">Web Development</option>
                </select>
            </div>
            <input type="button" id="Button" value="Get the value">
            <div id="log"></div>
        </div>
    </center>
    <script>
        $(document).ready(function () {
            $(document).ready(function () {
                $("#Button").on('click', function () {
                    var a = $("#GFG").selectmenu("option", "disabled");
                    $("#log").html('The value is: ' + a);
                });
            });
        });
    </script>
</body>
  
</html>

Producción:

jQuery Mobile Selectmenu option() Method

Referencia: https://api.jquerymobile.com/selectmenu/#method-option

Publicación traducida automáticamente

Artículo escrito por Kanchan_Ray y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

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