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: