Open In App

How to make Vertical Selects controlgroup using jQuery Mobile?

Last Updated : 25 Jun, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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 Selects control-group using jQuery Mobile.

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>
        <h4>Vertical Selects using jQuery Mobile</h4>
    </center>

    <fieldset data-role="controlgroup" />
    <legend>GeeksforGeeks</legend>

    <select name="gfg1" id="gfg">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>

    <select name="gfg2" id="gfg">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>

    <select name="gfg3" id="gfg">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>
</body>

</html>

Output:

impi3

Output

Example 2: The example below shows how to make a Vertical Selects controlgroup using jQuery Mobile.

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>
        <h4>Vertical Selects using jQuery Mobile</h4>
    </center>
    <fieldset data-role="controlgroup" />
    <legend>Vertical Select</legend>
    <select name="gfg1" id="gfg">
        <option value="#">Geeks1</option>
        <option value="#">Geeks2</option>
        <option value="#">Geeks3</option>
    </select>

    <select name="gfg2" id="gfg">
        <option value="#">Geeks1</option>
        <option value="#">Geeks2</option>
        <option value="#">Geeks3</option>
    </select>

    <select name="gfg3" id="gfg">
        <option value="#">Geeks1</option>
        <option value="#">Geeks2</option>
        <option value="#">Geeks3</option>
    </select>
</body>

</html>

Output:

impi4

Output



Next Article

Similar Reads