In this tutorial, we will learn jquery ui selectmenu example | jquery selectmenu dropdown example

You will learn how to create selectmenu in your code 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">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Selectmenu Example</title>
    <link rel="stylesheet" href="">
    <script src=""></script>
    <script src=""></script>
            margin:30px 0 0 0;
            margin: 0 auto;
            text-align: center;
        .demo fieldset{
            padding:0px 0px 50px 200px;
<h2>jQuery UI Selectmenu Example -</h2>
<div class="demo">
    <form action="#">
            <label for="speed">Select a speed</label>
            <select name="speed" id="speed">
                <option selected="selected">Medium</option>
            <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 label="Other files">
                    <option value="somefile">PHP</option>
                    <option value="someotherfile">Laravel</option>
                <label for="number">Select a number</label>
                <select name="number" id="number">
                <option selected="selected">1</option>
            <label for="salutation">Select a title</label>
            <select name="salutation" id="salutation">
                <option disabled selected>Please pick one</option>

            $( "#speed" ).selectmenu();
            $( "#files" ).selectmenu();
            $( "#number" )
                .selectmenu( "menuWidget" )
                .addClass( "overflow" );

May this example help you.