jQuery UI Selectmenu

To extend the functionality of a native HTML select element, the jQuery UI Selectmenu is used. The customization functionality in behavior and appearance provided by the jQuery UI Selectmenu is far beyond the limitation of a native select. A decent replacement of a select element is thus provided. The jQuery UI Selectmenu widget provides also acts as a proxy back to the original select element. It thus controls its state for form submission or serialization.

Example 1:

<!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="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  
  <link rel="stylesheet" href="https:/resources/demos/style.css">  
  <script>  
  $(function() {  
    $( "#degree" ).selectmenu();  
 
    $( "#subject" ).selectmenu();  
 
    $( "#age" )  
      .selectmenu()  
      .selectmenu( "menuWidget" )  
        .addClass( "overflow" );  
  });  
  </script>  
  <style>  
    fieldset {  
      border: 2px solid brown;  
    }  
    label {  
      display: block;  
      margin: 20px 0 0 0;  
    }  
    select {  
      width: 300px;  
    }  
    .overflow {  
      height: 180px;  
    }  
  </style>  
</head>  
<body>  
<div class="demo">  
<form action="#">  
<fieldset>  
    <label for="degree">Degree:</label>  
    <select name="degree" id="degree">  
      <option selected="selected">Engineering</option>  
      <option>Medical</option>  
      <option>Accounting</option>  
      <option>Marketing</option>  
      <option>Teaching</option>  
    </select>  
 <label for="subject">Subject Brochure:</label>  
    <select name="subject" id="subject">  
      <optgroup label="Scripts">  
        <option value="Mathematics">Mathematics.pdf</option>  
        <option value="Biology">Biology.pdf</option>  
      </optgroup>  
      <optgroup label="Others">  
        <option value="science">Science.pdf</option>  
        <option value="arts">Arts.pdf</option>  
      </optgroup>  
    </select>  
 <label for="age">Year of Birth:</label>  
    <select name="age" id="age">  
      <option>1996</option>  
      <option>1997</option>  
      <option>1998</option>  
      <option>1999</option>  
      <option>2000</option>  
      <option>2001</option>  
      <option>2002</option>  
      <option>2003</option>  
      <option>2004</option>  
      <option>2005</option>  
      <option>2006</option>  
      <option>2007</option>  
      <option>2008</option>  
      <option>2009</option>  
      <option>2010</option>  
      <option>2011</option>  
      <option>2012</option>  
      <option>2013</option>  
      <option>2014</option>  
      <option selected="selected">2015</option>  
    </select>  
  </fieldset>  
</form>  
</div>  
</body>  
</html>

Output 1:

Output 2:

Output 3:

Output 4:

Explanation:

In the above example, we are displaying the functionality of the Selectmenu.

The various options that can be used with this method are listed below:

Option Uses
appendTo To append the menu. The default value is NULL.
disabled To disable the Selectmenu, when set to true. The default value is FALSE.
icons To specify a button.
position To determine the position of the menu in relation to the associated button element.
width To define the width of the menu in pixels. The default value is NULL.

To initialize the Selectmenu with the disabled options specified:

Example:

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

We can use the “disable” option in two ways:

Get the disable option:

var disabled = $( “.selector” ).selectmenu( “option”, “disabled” );

Set the disable option:

$( “.selector” ).selectmenu( “option”, “disabled”, true );

Example 2:

<!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="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  
  <link rel="stylesheet" href="https:/resources/demos/style.css">  
  <script>  
  $(function() {  
    $( "#degree" ).selectmenu();  
 
    $( "#subject" ).selectmenu().selectmenu( "option", "disabled", true);; 
 
    $( "#age" )  
      .selectmenu()  
      .selectmenu( "menuWidget" )  
        .addClass( "overflow" );  
  });  
  </script>  
  <style>  
    fieldset {  
      border: 2px solid brown;  
    }  
    label {  
      display: block;  
      margin: 20px 0 0 0;  
    }  
    select {  
      width: 300px;  
    }  
    .overflow {  
      height: 180px;  
    }  
  </style>  
</head>  
<body>  
<div class="demo">  
<form action="#">  
<fieldset>  
    <label for="degree">Degree:</label>  
    <select name="degree" id="degree">  
      <option selected="selected">Engineering</option>  
      <option>Medical</option>  
      <option>Accounting</option>  
      <option>Marketing</option>  
      <option>Teaching</option>  
    </select>  
 <label for="subject">Subject Brochure:</label>  
    <select name="subject" id="subject">  
      <optgroup label="Scripts">  
        <option value="Mathematics">Mathematics.pdf</option>  
        <option value="Biology">Biology.pdf</option>  
      </optgroup>  
      <optgroup label="Others">  
        <option value="science">Science.pdf</option>  
        <option value="arts">Arts.pdf</option>  
      </optgroup>  
    </select>  
 <label for="age">Year of Birth:</label>  
    <select name="age" id="age">  
      <option>1996</option>  
      <option>1997</option>  
      <option>1998</option>  
      <option>1999</option>  
      <option>2000</option>  
      <option>2001</option>  
      <option>2002</option>  
      <option>2003</option>  
      <option>2004</option>  
      <option>2005</option>  
      <option>2006</option>  
      <option>2007</option>  
      <option>2008</option>  
      <option>2009</option>  
      <option>2010</option>  
      <option>2011</option>  
      <option>2012</option>  
      <option>2013</option>  
      <option>2014</option>  
      <option selected="selected">2015</option>  
    </select>  
  </fieldset>  
</form>  
</div>  
</body>  
</html>

Output:

Explanation:

In the above example, we are using the set method to display the usage of the jQuery UI Selectmenu.

The various actions or methods that can be used with this method are listed below:

Action Uses
close To close the menu. No argument is accepted by this method.
destroy To eliminate the Selectmenu functionality completely, thus returning the element back to its pre-init state. No argument is accepted by this method.
disable To disable the Selectmenu functionality. No argument is accepted by this method.
enable To enable the Selectmenu. No argument is accepted by this method.
instance To get the instance object of Selectmenu. No argument is accepted by this method.
menuWidget To retrieve the jQuery object containing the menu element. No argument is accepted by this method.
open To open the menu. No argument is accepted by this method.
option To retrieve an object having the key/value pairs specifying the current Selectmenu options hash.
refresh To parse the original element and re-render the menu. No argument is accepted by this method.
widget To retrieve a jQuery object having the button element.
Please Share