jQuery UI Selectmenu

jQuery UI Selectmenu is used to extend the functionality of a native HTML select element. It provides the customization functionality in behavior and appearance far beyond the limitation of a native select.

The jQuery UI Selectmenu widget provides a proper replacement of select element and act as a proxy back to the original select element controlling its state for form submission or serialization.

Example of jQuery UI selectmenu() method

Let's take a simple example to demonstrate the functionality of Selectmenu.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectmenu - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#speed" ).selectmenu();
 
    $( "#files" ).selectmenu();
 
    $( "#number" )
      .selectmenu()
      .selectmenu( "menuWidget" )
        .addClass( "overflow" );
  });
  </script>
  <style>
    fieldset {
      border: 0;
    }
    label {
      display: block;
      margin: 30px 0 0 0;
    }
    select {
      width: 200px;
    }
    .overflow {
      height: 200px;
    }
  </style>
</head>
<body>
<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">Some unknown file</option>
        <option value="someotherfile">Some other file with a very long option text</option>
      </optgroup>
    </select>
 <label for="number">Select a number</label>
    <select name="number" id="number">
      <option>1</option>
      <option selected="selected">2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option>14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
      <option>20</option>
    </select>
  </fieldset>
</form>
</div>
</body>
</html>

Test it Now

Following is a list of different options that can be used with this method.

Option	Description
appendTo	It is used to append the menu. Its default value is NULL.
disabled	If you set this option to true, it disables the Selectmenu. Its default value is FALSE.
icons	This option is used to specify a button.
position	It identifies the position of the menu in relation to the associated button element.
width	It specifies the width of the menu in pixels. Its default value is NULL.

Initialize the Selectmenu with the disabled options specified:

Let's take an example to demonstrate the above table options. The following example specifies how to use the disabled option in the jQuery UI Selectmenu example.

$( ".selector" ).selectmenu({
  disabled: true
}); 

There are two ways to use the option "disable":

1) Get the disable option:

1) Set the disable option:

jQueryUI selectmenu() example 2

In the following example, we are using set method:

Let's take an example to demonstrate the usage of selectmenu().

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectmenu - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#speed" ).selectmenu();
  $( "#files" ).selectmenu().selectmenu( "option", "disabled", true );;
 $( "#number" )
      .selectmenu()
      .selectmenu( "menuWidget" )
        .addClass( "overflow" );
  });
  </script>
  <style>
    fieldset {
      border: 0;
    }
    label {
      display: block;
      margin: 30px 0 0 0;
    }
    select {
      width: 200px;
    }
    .overflow {
      height: 200px;
    }
  </style>
</head>
<body>
<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">Some unknown file</option>
        <option value="someotherfile">Some other file with a very long option text</option>
      </optgroup>
    </select>
 
    <label for="number">Select a number</label>
    <select name="number" id="number">
      <option>1</option>
      <option selected="selected">2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option>14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
    </select>
  </fieldset>
</form>
 
</div>
 </body>
</html>

Test it Now

Following is a list of different actions (methods) that can be used with this jQueryUI Selectmenu method.

Action	Description
close	This method is used to close the menu. It does not accept any argument.
destroy	It is used to remove the Selectmenu functionality completely and return the element back to its pre-init state. It does not accept any argument.
disable	It is used to disable the Selectmenu functionality. It does not accept any argument.
enable	It is used to enable the Selectmenu. It does not accept any argument.
instance	This method retrieves the instance object of Selectmenu. It does not accept any argument.
menuWidget	It returns the jQuery object containing the menu element. It does not accept any argument.
open	It is used to open the menu. It does not accept any argument.
option	It gets an object having the key/value pairs specifying the current Selectmenu options hash.
refresh	It is used to parse the original element and re-render the menu. It does not accept any argument.
widget	It returns a jQuery object having the button element.