jQuery Mobile Selectmenu Widget theme Option

Last Updated : 30 Jun, 2021

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 using jQuery Mobile Selectmenu Widget theme Option to set the color scheme for the selectmenu. The value between the a-z letter maps to the swatches the theme. It accepts the string type value and its default value is null.

Syntax:

$( ".selector" ).selectmenu({
    theme: string
});

CDN Link: First, add jQuery Mobile scripts needed for your project.

<link rel="stylesheet" href="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css"> <script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>

Example:

HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js">
    </script>

    <script>
        $(document).ready(function () {
            $("#GFG").selectmenu({
                theme: "b"
            });
        });
    </script>
</head>

<body>
    <div data-role="page" id="page1">
        <center>
            <div data-role="header">
                <h1>GeeksforGeeks</h1>
                <h3>jQuery Mobile Selectmenu Widget theme Option</h3>
            </div>
        </center>

        <div role="main" class="ui-content">
            <label for="GFG" class="select">
                GeeksforGeeks Courses:
            </label>
            <select name="GFG" id="GFG">
                <option value="C">C Programming</option>
                <option value="CPP">C++ Programming</option>
                <option value="JAVA">Java Programming</option>
                <option value="overnight">Python Programming</option>
                <option value="WEB">Web Development</option>
            </select>
        </div>
    </div>
</body>

</html>

Output:

Reference: https://api.jquerymobile.com/selectmenu/#option-theme

jQuery Mobile Textinput Widget theme Option

ppatelkap

Improve

Article Tags :

jQuery Mobile Selectmenu Widget theme Option

Similar Reads

Thank You!

What kind of Experience do you want to share?