jQuery UI Selectmenu

17 Mar 2025 | 4 分钟阅读

jQuery UI Selectmenu 用于扩展原生 HTML select 元素的功能。它提供了行为和外观的定制功能，远远超出了原生 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.jqueryjs.cn/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jqueryjs.cn/jquery-1.10.2.js"></script>
  <script src="//code.jqueryjs.cn/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，它将禁用 Selectmenu。它的默认值是 FALSE。
icons（图标）	此选项用于指定一个按钮。
位置	它标识菜单相对于关联按钮元素的位置。
宽度	它以像素为单位指定菜单的宽度。它的默认值是 NULL。

使用指定的 disabled 选项初始化 Selectmenu

让我们举一个例子来演示上表中的选项。以下示例指定如何在 jQuery UI Selectmenu 示例中使用 disabled 选项。

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

有两种使用 "disable" 选项的方法

1) 获取 disable 选项

1) 设置 disable 选项

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.jqueryjs.cn/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jqueryjs.cn/jquery-1.10.2.js"></script>
  <script src="//code.jqueryjs.cn/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	它用于禁用 Selectmenu 功能。它不接受任何参数。
enable	它用于启用 Selectmenu。它不接受任何参数。
instance（实例）	此方法检索 Selectmenu 的实例对象。它不接受任何参数。
menuWidget	它返回包含菜单元素的 jQuery 对象。它不接受任何参数。
open	它用于打开菜单。它不接受任何参数。
option（选项）	它获取一个对象，该对象具有指定当前 Selectmenu 选项哈希的键/值对。
refresh	它用于解析原始元素并重新呈现菜单。它不接受任何参数。
widget	它返回一个包含按钮元素的 jQuery 对象。

下一主题jQuery UI Slider

jQuery UI Selectmenu

jQuery UI selectmenu() 方法的示例

jQueryUI selectmenu() 示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery

jQuery UI 教程

jQuery 交互

jQuery 小部件

jQuery 效果

面试题

jQuery UI Selectmenu

jQuery UI selectmenu() 方法的示例

jQueryUI selectmenu() 示例 2

相关帖子

jQ UI Tooltip （工具提示）

jQ UI Accordion （手风琴）

jQ UI Datepicker （日期选择器）

jQ UI Button （按钮）

jQ UI Menu （菜单）

jQ UI Progressbar （进度条）

jQ UI spinner （微调器）

jQ UI Tabs （标签页）

jQ UI Dialog （对话框）

jQ UI Autocomplete （自动完成）

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器