如何使用 jQuery UI Selectmenu 在更改时获取所选项目的值

Question

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

<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 行，它会正常工作。

谢谢！

Answer 1

jQuery UI 隐藏你原来的<select> 并使用动态注入的元素创建自定义widjets。所以你不再点击你提供的原始<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);
}); 

Answer 2

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

试试这个。

$( "#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>