How to create a Mini sized selects using jQuery Mobile ?

How to make Basic selects using jQuery Mobile ?

Last Updated : 23 Dec, 2020

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 making Basic 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=
"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>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h4>
            Basic Selects using
            jQuery Mobile
        </h4>
    </center>

    <form>
        <div data-role="fieldcontain">
            <label for="Geeks">
                Select Element:
            </label>
            <select name="Geeks" id="Geeks">
                <option value="1">
                    Geek1
                </option>

                <option value="2">
                    Geek2
                </option>

                <option value="3">
                    Geek3
                </option>

                <option value="4">
                    Geek4
                </option>
            </select>
        </div>
    </form>
</body>

</html>

Output:

How to create a Mini sized selects using jQuery Mobile ?

taran910

Improve

Article Tags :

Similar Reads

How to make Basic Navbar using jQuery Mobile ?

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 making Basic navbar using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="stylesheet" hr

How to make Vertical selects using jQuery Mobile ?

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 making Vertical selects using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="stylesheet

How to make Mini vertical selects using jQuery Mobile ?

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 making Mini Vertical selects using jQuery Mobile.Approach: First, add jQuery Mobile scripts needed for your project. <link rel="styles

How to make Theme collapsibles using jQuery Mobile ?

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 a Theme collapsible using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel="stylesheet"

How to create a Mini sized selects using jQuery Mobile ?

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 a Mini sized selects using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="sty

How to make Vertical Selects controlgroup using jQuery Mobile?

To create a Vertical Selects control group using jQuery Mobile, you utilize its framework designed for responsive web content across various devices, ensuring seamless interaction and accessibility on smartphones, tablets, and desktops alike. Example 1: The example below shows how to make a Vertical

How to make Basic Header markup using jQuery Mobile ?

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 making Basic Header markup using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="styles

How to create a Basic Slider using jQuery Mobile ?

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 a Basic Slider using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheetâ€ href=

How to create Optgroup selects using jQuery Mobile ?

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="stylesh

How to make a Value/Text Input using jQuery Mobile ?

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 a Value/Text Input using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheetâ€ h