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主题和功能。

任何人都可以告诉我这个问题是什么。再次，如果我删除该选择菜单行，它工作正常。

谢谢！

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

使用指定的select回调初始化selectmenu：

试试这个。

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

如何使用jQuery UI Selectmenu获取所选项目的值

2 个答案: