jQuery UI Selectmenu

jQuery UI Selectmenu用于扩展本机HTML select元素的功能。它提供了行为和外观方面的自定义功能，远远超出了本机选择的限制。

jQuery UI Selectmenu小部件提供了对select元素的适当替换，并充当了返回原始select元素的代理，从而控制了其提交表单或序列化状态。

jQuery UI selectmenu()方法的示例

让我们以一个简单的示例来演示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>

以下是可与该方法一起使用的不同选项的列表。

选项	说明
appendTo	用于附加菜单。默认值为NULL。
disabled	如果将此选项设置为true，则会禁用"选择"菜单。默认值为FALSE。
icons	此选项用于指定按钮。
position	它标识菜单相对于关联的按钮元素的位置。
width	它指定菜单的宽度(以像素为单位)。默认值为NULL。

初始化Selectmenu
disabled选项:

让我们以一个示例来演示上述表选项。以下示例指定了如何在jQuery UI Selectmenu示例中使用Disabled选项。

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

有两种方法可以使用选项"禁用":

1)获取禁用选项:

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

1)设置禁用选项:

 $(".selector").selectmenu( "option", "disabled", true );

jQueryUI selectmenu()示例2

在下面的示例中，我们使用set方法:

让我们以一个示例来演示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>

以下是可与此jQueryUI Selectmenu方法一起使用的不同操作(方法)的列表。

动作	说明
close	此方法用于关闭菜单。它不接受任何参数。
destroy	它用于完全删除Selectmenu功能并将元素返回到其初始状态。它不接受任何参数。
disable	它用于禁用选择菜单功能。它不接受任何参数。
enable	用于启用选择菜单。它不接受任何参数。
instance	此方法检索Selectmenu的实例对象。它不接受任何参数。
menuWidget	它返回包含菜单元素的jQuery对象。它不接受任何参数。
open	用于打开菜单。它不接受任何参数。
option	它将获取一个具有键/值对的对象，这些键/值对指定当前的Selectmenu选项哈希。
refresh	它用于解析原始元素并重新呈现菜单。它不接受任何参数。
widget	它返回一个具有button元素的jQuery对象。

jQuery UI Slider

jQuery UI Progressbar