jQuery Mobile - Menú de selección de lista larga

Descripción

Muestra la lista larga para el menú de selección personalizado cuando hay más listas disponibles.

Ejemplo

El siguiente ejemplo demuestra el uso del menú de selección de lista larga 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 long list Example</h2>
      <div class = "ui-field-contain">
         <label for = "select-custom">Custom Select</label>
         
         <select id = "select-custom" data-native-menu = "false">
            <option value = "mu">Mumbai</option>
            <option value = "pu">Pune</option>
            <option value = "be">Belgaum</option>
            <option value = "ch">Chennai</option>
            <option value = "ban">Bangalore</option>
            <option value = "de">Delhi</option>
            <option value = "jh">Jhansi</option>
            <option value = "oo">Ooty</option>
            <option value = "th">Thane</option>
            <option value = "ma">Mangalore</option>
            <option value = "dh">Dharwad</option>
            <option value = "hy">Hyderabad</option>
            <option value = "hu">Hubli</option>
            <option value = "sa">Satara</option>
            <option value = "mat">Mathura</option>
            <option value = "ag">Agra</option>
         </select>
         
      </div>
   </body>
</html>

Salida

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

  • Guarde el código html anterior como selectmenu_long_list.html archivo en la carpeta raíz de su servidor.

  • Abra este archivo HTML como http: //localhost/selectmenu_long_list.html y se mostrará el siguiente resultado.