jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be creating Optgroup selects using jQuery Mobile.
Approach: First, add jQuery Mobile scripts needed for your project.
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css”/>
<script src=”http://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>
Example:
HTML
<!DOCTYPE html> < html > < head > < link rel = "stylesheet" href = < script src = </ script > < script src = </ script > </ head > < body > < center > < h1 >GeeksforGeeks</ h1 > < h4 > optgroup option Selects using jQuery Mobile </ h4 > </ center > < form > < div data-role = "fieldcontain" > < label for = "Geeks" >Select Element:</ label > < select name = "Geeks" id = "Geeks" > < option >Choose...</ option > < optgroup label = "Group 1" > < option value = "1" >Geeks1</ option > < option value = "2" >Geeks2</ option > < option value = "3" >Geeks3</ option > < option value = "4" >Geeks4</ option > </ optgroup > < optgroup label = "Group 2" > < option value = "5" >Geeks5</ option > < option value = "6" >Geeks6</ option > < option value = "7" >Geeks7</ option > </ optgroup > </ select > </ div > </ form > </ body > </ html > |
Output:
Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.