jquery ui selectmenu example | jquery selectmenu dropdown example

jQuery · 11-Apr-2023

When “jquery ui selectmenu example | jquery selectmenu dropdown example” moves through design, development and browser testing, this workflow reference can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.

Hi Guys,

In this example.I will learn you how to create selectmenu in jquery ui.you can easy and simply use selectmenu dropdown in jquery ui.

Select Menu function can be used with widgets in JqueryUI.It provides a styleable select element replacement.

Example :

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Selectmenu Example</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
        label{
            display:block;
            margin:30px 0 0 0;
        }
        .overflow{
            height:200px;
        }
        .demo{
            margin: 0 auto;
            width:50%;
        }
        h2{
            text-align: center;
        }
        .demo fieldset{
            margin-top:120px;
            padding:0px 0px 50px 200px;
        }
    </style>
</head>
<body>
<h2>jQuery UI Selectmenu Example - NiceSnippets.com</h2>
<div class="demo">
    <form action="#">
        <fieldset>
            <label for="speed">Select a speed</label>
            <select name="speed" id="speed">
                <option>Slower</option>
                <option>Slow</option>
                <option selected="selected">Medium</option>
                <option>Fast</option>
                <option>Faster</option>
            </select>
            <label for="files">Select a file</label>
            <select name="files" id="files">
                <optgroup label="Scripts">
                    <option value="jquery">jQuery.js</option>
                    <option value="jqueryui">ui.jQuery.js</option>
                </optgroup>
                <optgroup label="Other files">
                    <option value="somefile">PHP</option>
                    <option value="someotherfile">Laravel</option>
                </optgroup>
            </select>
                <label for="number">Select a number</label>
                <select name="number" id="number">
                <option selected="selected">1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>

     
            <label for="salutation">Select a title</label>
            <select name="salutation" id="salutation">
                <option disabled selected>Please pick one</option>
                <option>Mr.</option>
                <option>Mrs.</option>
                <option>Dr.</option>
                <option>Prof.</option>
                <option>Other</option>
            </select>
        </fieldset>
    </form>
</div>
    <script>
        $(function(){
            $( "#speed" ).selectmenu();
            $( "#files" ).selectmenu();
            $( "#number" )
                .selectmenu()
                .selectmenu( "menuWidget" )
                .addClass( "overflow" );
            $("#salutation").selectmenu();
        });
  </script>
</body>
</html>

It will help you....