Question

如何在jQuery UI中访问菜单选项？我习惯了以下形式：

<form>
<select onchange="showUser(this.value)">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>

然后使用以下方式访问表单：

function showUser(str) {
    if (str=="1"){
      // do something
   }
}

但是，jQuery UI表单似乎没有附加功能，因此我不确定如何访问选择。

这是jQuery UI菜单代码（来自http://jqueryui.com/menu/#categories）：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Menu - Categories</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#menu" ).menu({
      items: "> :not(.ui-widget-header)"
    });
  });
  </script>
  <style>
  .ui-menu { width: 200px; }
  .ui-widget-header { padding: 0.2em; }
  </style>
</head>
<body>

<ul id="menu">
  <li class="ui-widget-header">Category 1</li>
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3</li>
  <li class="ui-widget-header">Category 2</li>    
  <li>Option 4</li>
  <li>Option 5</li>
  <li>Option 6</li>
</ul>

如何访问每个选项，如上例所示？

Answer 1

这应该有用。

$('#menu').menu({
    select: function(event, ui) {
        alert(ui.item.text());
    }
});

jQuery UI＆＃39; menu有一个select方法，您可以在其中访问事件和UI小部件。这会添加一个事件监听器，您可以访问该数据。

jQuery UI菜单，如何访问选项？

1 个答案: