Skip to main content

Jquery Mobile Form - Select Menus Part I

    Today we will take a look at the select boxes styling and usage using Jquery Mobile. Select menus has a little more explanation and examples than other controls and so I am dividing the select menus tutorial into 2 parts. In the first part, we will take a look at the basics of the Jquery Mobile select menus and in the second part we will take a look at the more complex examples involving the select menus.

    The Jquery Mobile select menu is based on the native HTML select element, which is styled and modified to suite the Jquery Mobile framework's style. By default, the framework leverages the native OS options menu to use with the custom select button. When the button is clicked, the native OS menu will open. When a value is selected and the menu closes, the custom button's text is updated to match the selected value. The framework also offers the possibility of having custom (non-native) select menus; which we will discuss in part 2 of this tutorial. Refer to the screenshots below to understand how the native select menus work.

The Native menu - Android 4.1.1/ HTC One X


The Native menu - iPhone 4S/ iOS 6.1.3


    The select boxes can be used singularly or in a vertical group or can be even grouped horizontally. These select boxes can be used along with data-mini="true" too, which renders the select boxes in a smaller size. We will take a look at all this in the example that follows.


    The first implementation of the select box in the above code is the regular, simple select box. The framework styles this select element as per the Jquery Mobile framework styles displaying a button with custom down arrow and using the native OS menu. The second implementation is exactly similar to the first one with the only difference of data-mini="true" attribute. Addition of this data attribute to the select element renders a smaller select box..

    In the next implementation we have the label and the select box aligned side-by-side. To achieve this, we need to wrap the select element with in a div with data-role="fieldcontain". Adding this data attribute to the div tells the framework to align the label and the select box side-by-side.

    In the fourth implementation we have the regular select element with the optgroup used for the options. Including options within the optgroup element, groups these options visually under a single optgroup label. However, the support for this feature in mobile selects is a bit spotty, but is improving by the day.

    Multiple select boxes can be grouped together like checkboxes or radio buttons to achieve visual grouping of the select elements. The select boxes can be grouped vertically as well as horizontally. To achieve this the select elements need to be wrapped within a fieldset element with data-role="controlgroup". Doing this would group the select boxes vertically (which is the default grouping technique). To group the select boxes horizontally as seen in the last implementation, you need to add another data attribute data-type="horizontal" to the fieldset element.

    For the sake of accessibility, jQuery Mobile requires that all form elements be paired with a meaningful label. To hide labels in a way that leaves them visible to assistive technologies. — for example, when letting an element's placeholder attribute serve as a label — apply the helper class ui-hidden-accessible to the label itself. While the label will no longer be visible, it will be available to assisitive technologies such as screen readers.

    Hope this post has cleared out your basics of the Jquery Mobile select menus. In part 2 of this tutorial, we will take a look at the advanced select menu options where we can override the default menu behavior and create differently styled select menus. Stay tuned for the advanced topics on select menus in the next post and you can also look at the complete list of Jquery mobile listview and form elements examples. Fun is on it's way!

Recommended for You

Where does Google get it's live traffic data from?

Referring to a post that I wrote earlier, Google’s - Live traffic Layer, ever wondered how Google collected this data? I was wondering the other day, how Google received live data to display it on their maps as a layer! I looked up the web and found something very interesting and am sharing the same with you all.As we all know, the traffic layer is available most accurately in several states in USA. Most major metro areas in the US have sensors embedded in their highways. These sensors track real time traffic data. Easy to miss at high speeds (hopefully anyway, traffic permitting), more commonly noticed may be the similar sensors that often exist at many busy intersections that help the traffic lights most efficiently let the most amount of people through. The information from these tracking sensors is reported back to the Department of Transportation (DOT). The DOT uses this data to update some of the digital signs that report traffic conditions in many metro areas. They also…

jQuery Mobile's Next Big Step

Spatial Unlimited changes to The UI Dev


After being hosted on blogger 😣 for the last 6 years 📆, this page has finally been moved to Github.io
This means a few things for you, dear reader!

You will be redirected to the new page shortly! ⏩ ⏩ ⏩


Once crapy HTML is now better looking Markdown! 😍 😍


The entire blog is a Github repo! 😍 😍


Spatial Unlimited is now The UI Dev 😍 😍


ES6 101 - Class

Spatial Unlimited changes to The UI Dev


After being hosted on blogger 😣 for the last 6 years 📆, this page has finally been moved to Github.io
This means a few things for you, dear reader!

You will be redirected to the new page shortly! ⏩ ⏩ ⏩


Once crapy HTML is now better looking Markdown! 😍 😍


The entire blog is a Github repo! 😍 😍


Spatial Unlimited is now The UI Dev 😍 😍


Two maps on the same page - Side-by-side

How good I am feeling to post a code example after such a long time! It's been all "news" over the past so many posts! Well now that I am finally doing a code example, I am posting a very highly requested code sample. Placing two Google Maps on the same page (Now that's simple you would say!), but side by side. Now this is the thing that most people struggle with. Well, implementing the second part is also very simple, as you will see in today's code.

    Let's see the code. Here it is!



    The output of the above code will be as seen in the result section above.

    As most of you will realize, there are two maps, one centered at "Pune" and other at "Noida". Why I chose these two locations? Well, just like that!...The main issue of concern is how the maps appeared side-by-side and not one below the other as would be normal behavior of two "div" elements used in the same page. Now here is the trick! Check out the the first

Geodesic Polyline

Today we will have a look at a very interesting polyline example - "The geodesic polyline". Now the first question that will pop is "What is geodesic?". Mathematically, geodesic means the shortest line between two points on a mathematically defined surface, as a straight line on a plain or an arc of a great circle or sphere.

    The next question after reading the above definition is clearly, "Why do we need geodesic polylines?" and that would be followed up with "What is this Great Circle?". We will discuss this first, before we move on to the actual example today. The example is very very similar to the normal polyline example, with just a small change.

    Having said so, I will now try to explain why we need a geodesic polyline? The shortest distance between two locations on the earth is rarely a straight line as the earth is roughly spherical in nature. So any two points on the earth, even if they are very close lie on a curve and not …