jQuery Mobile - Menus de sélection personnalisés de formulaires

La description

Le menu de sélection personnalisé est utilisé pour afficher la liste des menus au format popup dans le formulaire.

Exemple

L'exemple suivant illustre l'utilisation de menus de sélection personnalisés de formulaire dans 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>
      <div data-role = "page">
         <div data-role = "header">
            <h2>Form Custom Select Menus</h2>
         </div>
         
         <div data-role = "main" class = "ui-content">
            <form method = "post" action = "jquery_mobile/demo.php">
               
               <fieldset class = "ui-field-contain">
                  <label for = "select-custom">Custom Select</label>
                  <select id = "select-custom" data-native-menu = "false" name = "fname">
                     <option value = "Mumbai">Mumbai</option>
                     <option value = "Pune">Pune</option>
                     <option value = "Belgaum">Belgaum</option>
                     <option value = "Chennai">Chennai</option>
                     <option value = "Bangalore">Bangalore</option>
                  </select>
               </fieldset>
               
               <input type = "submit" value = "Submit" data-inline = "true">
            </form>
         </div>
         
      </div>
   </body>
</html>

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code html ci-dessus sous form_custom_select_menus.html fichier dans le dossier racine de votre serveur.

  • Ouvrez ce fichier HTML en tant que http: //localhost/form_custom_select_menus.html et la sortie suivante sera affichée.