jQuery Mobile - Form Custom Select Menus

Description

The custom select menu is used to display the menu list in the popup format in the form.

Example

Following example demonstrates the use of form custom select menus 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>
      <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>

Output

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

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

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

jquery_mobile_forms.htm
Advertisements