Vertical group, mini Selectmenu

Description

Include data-mini = "true" attribute in the fieldset to create the vertical group select menu in the mini size.

Example

Following example demonstrates the use of vertical group mini select menu in the jQuery Mobile.

Live Demo 
<!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 vertical group mini Example</h2>
      <form>
         <fieldset data-role = "controlgroup" data-mini = "true">
            <legend>Vertical group menu</legend>

            <label for = "select">Select</label>
            <select data-iconpos = "left" id = "select">
               <option value = "#">Maharastra</option>
               <option value = "#">Mumbai</option>
               <option value = "#">Pune</option>
            </select>

            <label for = "select">Select</label>
            <select data-iconpos = "left" id = "select">
               <option value = "#">Karnataka</option>
               <option value = "#">Bangalore</option>
               <option value = "#">Belgaum</option>
            </select>

            <label for = "select">Select</label>
            <select data-iconpos = "left" id = "select">
               <option value = "#">Tamil Nadu</option>
               <option value = "#">Chennai</option>
               <option value = "#">Ooty</option>
            </select>
            
         </fieldset>
      </form>
   </body>
</html>

Output

Let's carry out the following steps to see how the above code works −

  • Save the above html code as selectmenu_vertical_group_mini.html file in your server root folder.

  • Open this HTML file as http://localhost/selectmenu_vertical_group_mini.html and the following output will be displayed.

jquery_mobile_widgets.htm
Advertisements