javascript 如何使用 jQueryUI Selectenu 在更改时获取所选项目的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26696431/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get the value of selected item on change using jQueryUI Selectenu
提问by user3785198
I am using the Select Menu widget to display a list of states within a form:
我正在使用“选择菜单”小部件来显示表单中的状态列表：
<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>
In my script I have
在我的脚本中，我有
$( "#state" ).selectmenu();
Now, what I am trying to do is send out an alert of the value of the selected option. So I have this:
现在，我要做的是发出所选选项值的警报。所以我有这个：
$('select').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
alert(valueSelected);
});
The issue is that for some reason none of that is working when I use the JQueryUI function selectmenu()
问题是，由于某种原因，当我使用 JQueryUI 函数时，这些都不起作用 selectmenu()
When I remove that one line, everything functions as normal. It was my understanding that I need to include $( "#state" ).selectmenu();in order to utilize the JQuery UI theme and functionality.
当我删除那一行时，一切正常。我的理解是$( "#state" ).selectmenu();，为了利用 JQuery UI 主题和功能，我需要包括在内 。
Can anyone enlighten me on what the issue may be. Again, it works fine if I remove that selectmenu line.
任何人都可以启发我了解问题可能是什么。同样，如果我删除那个选择菜单行，它工作正常。
Thanks!
谢谢！
回答by T J
jQuery UI hides your original <select>and creates custom widjets using dynamically injected elements. So you are no longer clicking on the original <option>'s you provided, and no changeevent will be triggered on it.
jQuery UI 隐藏您的原始内容，<select>并使用动态注入的元素创建自定义 widjet。因此，您不再单击<option>您提供的原始'，并且不会change在其上触发任何事件。
Instead, it emits a selectmenuchangeevent when the selected item is changed . You can listen to it by passing the handler function to the changeoption while initializing the plugin.
相反，它会selectmenuchange在所选项目更改时发出一个事件。您可以通过change在初始化插件时将处理程序函数传递给选项来收听它。
The itemproperty of second argument passed to the callback function refers to the item you've selected. You can access it's value as shown below:
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>You can also manually listen to this event like:
您还可以手动收听此事件，例如：
$('select').on('selectmenuchange', function (e,ui) {
alert(ui.item.value);
});
回答by Ronny Kibet
Initialize the selectmenu with the select callback specified:
使用指定的选择回调初始化选择菜单：
Try this.
试试这个。
$( "#state" ).selectmenu({
select: function( event, ui ) {}
});
Or You might be using an older version of the jquery-uiplugin. please check if it supports the selectmenuplugin.
或者您可能正在使用旧版本的jquery-ui插件。请检查它是否支持该selectmenu插件。
try the following.
请尝试以下操作。
<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>
