8

我正在使用“选择菜单”小部件来显示表单中的状态列表：

<select name="state" id="state">
   <option value = "">Select State</option>
   <option value = "Alabama">Alabama</option>
   <option value= "Alaska">Alaska</option>
   <option value= "Arizona">Arizona</option>
   <option value= "California">California</option>
   <option value= "Colorado">Colorado</option>
   <option value= "Connecticut">Connecticut</option>
 </select>

在我的脚本中，我有

 $( "#state" ).selectmenu();

现在，我要做的是发出所选选项值的警报。所以我有这个：

$('select').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    alert(valueSelected);
});

问题是由于某种原因，当我使用 JQueryUI 函数时，这些都不起作用selectmenu()

当我删除那一行时，一切正常。$( "#state" ).selectmenu();我的理解是，为了使用 JQuery UI 主题和功能，我需要包括在内 。

谁能告诉我这个问题可能是什么。同样，如果我删除该 selectmenu 行，它会正常工作。

谢谢！

4

2 回答 2

12

jQuery UI 隐藏您的原始<select>并使用动态注入的元素创建自定义 widjet。因此，您不再单击<option>您提供的原始文件，并且不会change触发任何事件。

selectmenuchange相反，它会在所选项目发生更改时发出一个事件。change您可以通过在初始化插件时将处理程序函数传递给选项来收听它。

传递给回调函数的第二个参数的item属性是指您选择的项目。您可以访问它的值，如下所示：

$("#state").selectmenu({
  change: function(event, ui) {
    alert(ui.item.value);
  }
});
<link href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<select name="state" id="state">
  <option value="">Select State</option>
  <option value="Alabama">Alabama</option>
  <option value="Alaska">Alaska</option>
  <option value="Arizona">Arizona</option>
  <option value="California">California</option>
  <option value="Colorado">Colorado</option>
  <option value="Connecticut">Connecticut</option>
</select>

您还可以手动收听此事件，例如：

$('select').on('selectmenuchange', function (e,ui) {
   alert(ui.item.value);
});
于 2014-11-02T09:27:38.157 回答
0

使用指定的选择回调初始化选择菜单：

试试这个。

$( "#state" ).selectmenu({
  select: function( event, ui ) {}
});

或者您可能正在使用旧版本的jquery-ui插件。请检查它是否支持该selectmenu插件。

尝试以下。

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
于 2014-11-02T05:50:45.640 回答