jQuery Mobile - Selecmenu Optgroup

Descripción

El elemento móvil optgroup jQuery se utiliza para agrupar la lista de selección y las etiquetas <option> se utilizan para definir un elemento en ese grupo en particular en una lista de selección.

Ejemplo

El siguiente ejemplo demuestra el uso de Optgroup en el menú de selección en jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <h2>Selectmenu grouped option Example</h2>
      <form>
         <div class = "ui-field-contain">
            <label for = "select">Group Option </label>
            
            <select name = "select" id = "select">
               <option>Select</option>
               
               <optgroup label = "Karnataka">
                  <option value = "1">Bangalore</option>
                  <option value = "2">Mangalore</option>
                  <option value = "3">Dharwad</option>
                  <option value = "4">Belgaum</option>
               </optgroup>
               
               <optgroup label = "Maharastra">
                  <option value = "5">Mumbai</option>
                  <option value = "6">Pune</option>
                  <option value = "7">Thane</option>
               </optgroup>
            </select>
            
         </div>
      </form>
   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como selectmenu_optgroup.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/selectmenu_optgroup.html y se mostrará el siguiente resultado.

↰ Previous page