Framework7 - Sélection multiple et Optgroup

La description

La sélection intelligente permet d'utiliser plusieurs options de sélection et de groupe en utilisant les attributs multiples et optgroup .

Exemple

L'exemple suivant illustre l'utilisation de plusieurs select et optgroup dans Framework7 -

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Multiple Select and Optgroup</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "left"> </div>
                  <div class = "center sliding">Multiple Select and Optgroup</div>
                  <div class = "right"> </div>
               </div>
            </div>
            
            <div class = "pages navbar-through">
               <div data-page = "home" class = "page">
                  <div class = "page-content">
                     <div class = "list-block">
                        <ul>
                           <li>
                              <a href = "#" class = "item-link smart-select">
                              
                                 <select name = "car" multiple>
                                    <optgroup label = "India">
                                       <option value = "delhi" selected>Delhi</option>
                                       <option value = "mumbai">Mumbai</option>
                                       <option value = "bangalore">Bangalore</option>
                                    </optgroup>
                                    
                                    <optgroup label = "United Kingdom">
                                       <option value = "london">London</option>
                                       <option value = "belfast" selected>Belfast</option>
                                       <option value = "wells">Wells</option>
                                    </optgroup>
                                    
                                    <optgroup label = "Australia">
                                       <option value = "sydney">Sydney</option>
                                       <option value = "perth" selected>Perth</option>
                                       <option value = "melbourne">Melbourne</option>
                                    </optgroup>
                                 </select>
                                 
                                 <div class = "item-content">
                                    <div class = "item-inner">
                                       <div class = "item-title">Cities</div>
                                    </div>
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>
                  </div>
                  
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         // here initialize the app
         var myApp = new Framework7 ({
            animateNavBackIcon:true
         });

         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

         // Add the view
         var mainView = myApp.addView('.view-main', {
         
            // enable the dynamic navbar for this view
            dynamicNavbar: true
         });
      </script>
   </body>

</html>

Production

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

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

  • Ouvrez ce fichier HTML en tant que http: //localhost/smart_select_multiple_optgroup.html et la sortie s'affiche comme indiqué ci-dessous.

  • Lorsque vous cliquez sur l'option 'Villes', vous pouvez voir différentes options pour chaque ville, ce qui vous permet de sélectionner plusieurs options pour chaque ville et vous pouvez revenir en arrière en cliquant sur le lien retour.